coveragebook_components 0.5.0 → 0.5.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +7 -5
  3. data/app/assets/build/coco/app.js +95 -48
  4. data/app/assets/build/coco/book.css +3 -0
  5. data/app/assets/build/coco/book.js +2 -2
  6. data/app/assets/js/helpers/path.js +9 -1
  7. data/app/components/coco/app/blocks/slide_editor/slide_editor.css +4 -0
  8. data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb +145 -190
  9. data/app/components/coco/app/blocks/slide_editor/slide_editor.js +70 -17
  10. data/app/components/coco/app/blocks/slide_editor/slide_editor.rb +37 -86
  11. data/app/components/coco/app/elements/alert/alert.css +1 -1
  12. data/app/components/coco/app/elements/color_picker_button/color_picker_button.html.erb +17 -16
  13. data/app/components/coco/app/elements/color_picker_button/color_picker_button.js +0 -8
  14. data/app/components/coco/app/elements/color_picker_button/color_picker_button.rb +2 -15
  15. data/app/components/coco/app/elements/image_picker/image_picker.html.erb +4 -4
  16. data/app/components/coco/app/elements/image_picker/image_picker.js +18 -6
  17. data/app/components/coco/app/elements/image_picker/image_picker.rb +2 -11
  18. data/app/components/coco/app/elements/image_picker_button/image_picker_button.html.erb +9 -8
  19. data/app/components/coco/app/elements/image_picker_button/image_picker_button.js +10 -23
  20. data/app/components/coco/app/elements/image_picker_button/image_picker_button.rb +19 -35
  21. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.html.erb +7 -4
  22. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js +9 -3
  23. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.rb +5 -20
  24. data/app/components/coco/base/image_uploader/image_uploader.html.erb +3 -2
  25. data/app/components/coco/base/image_uploader/image_uploader.rb +2 -12
  26. data/app/components/coco/book/blocks/slides/media_slide/media_slide.css +1 -1
  27. data/lib/coco.rb +1 -1
  28. metadata +2 -6
  29. data/app/assets/build/coco/app.dev.css +0 -3427
  30. data/app/assets/build/coco/app.dev.js +0 -24891
  31. data/app/assets/build/coco/book.dev.css +0 -992
  32. data/app/assets/build/coco/book.dev.js +0 -19840
@@ -1,3427 +0,0 @@
1
- /*
2
- ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
3
- *//*
4
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
5
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
6
- */
7
-
8
- *,
9
- ::before,
10
- ::after {
11
- box-sizing: border-box; /* 1 */
12
- border-width: 0; /* 2 */
13
- border-style: solid; /* 2 */
14
- border-color: #E5E7EB; /* 2 */
15
- }
16
-
17
- ::before,
18
- ::after {
19
- --tw-content: '';
20
- }
21
-
22
- /*
23
- 1. Use a consistent sensible line-height in all browsers.
24
- 2. Prevent adjustments of font size after orientation changes in iOS.
25
- 3. Use a more readable tab size.
26
- 4. Use the user's configured `sans` font-family by default.
27
- 5. Use the user's configured `sans` font-feature-settings by default.
28
- 6. Use the user's configured `sans` font-variation-settings by default.
29
- */
30
-
31
- html {
32
- line-height: 1.5; /* 1 */
33
- -webkit-text-size-adjust: 100%; /* 2 */
34
- -moz-tab-size: 4; /* 3 */
35
- -o-tab-size: 4;
36
- tab-size: 4; /* 3 */
37
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
38
- font-feature-settings: normal; /* 5 */
39
- font-variation-settings: normal; /* 6 */
40
- }
41
-
42
- /*
43
- 1. Remove the margin in all browsers.
44
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
45
- */
46
-
47
- body {
48
- margin: 0; /* 1 */
49
- line-height: inherit; /* 2 */
50
- }
51
-
52
- /*
53
- 1. Add the correct height in Firefox.
54
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
55
- 3. Ensure horizontal rules are visible by default.
56
- */
57
-
58
- hr {
59
- height: 0; /* 1 */
60
- color: inherit; /* 2 */
61
- border-top-width: 1px; /* 3 */
62
- }
63
-
64
- /*
65
- Add the correct text decoration in Chrome, Edge, and Safari.
66
- */
67
-
68
- abbr:where([title]) {
69
- -webkit-text-decoration: underline dotted;
70
- text-decoration: underline dotted;
71
- }
72
-
73
- /*
74
- Remove the default font size and weight for headings.
75
- */
76
-
77
- h1,
78
- h2,
79
- h3,
80
- h4,
81
- h5,
82
- h6 {
83
- font-size: inherit;
84
- font-weight: inherit;
85
- }
86
-
87
- /*
88
- Reset links to optimize for opt-in styling instead of opt-out.
89
- */
90
-
91
- a {
92
- color: inherit;
93
- text-decoration: inherit;
94
- }
95
-
96
- /*
97
- Add the correct font weight in Edge and Safari.
98
- */
99
-
100
- b,
101
- strong {
102
- font-weight: bolder;
103
- }
104
-
105
- /*
106
- 1. Use the user's configured `mono` font family by default.
107
- 2. Correct the odd `em` font sizing in all browsers.
108
- */
109
-
110
- code,
111
- kbd,
112
- samp,
113
- pre {
114
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
115
- font-size: 1em; /* 2 */
116
- }
117
-
118
- /*
119
- Add the correct font size in all browsers.
120
- */
121
-
122
- small {
123
- font-size: 80%;
124
- }
125
-
126
- /*
127
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
128
- */
129
-
130
- sub,
131
- sup {
132
- font-size: 75%;
133
- line-height: 0;
134
- position: relative;
135
- vertical-align: baseline;
136
- }
137
-
138
- sub {
139
- bottom: -0.25em;
140
- }
141
-
142
- sup {
143
- top: -0.5em;
144
- }
145
-
146
- /*
147
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
148
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
149
- 3. Remove gaps between table borders by default.
150
- */
151
-
152
- table {
153
- text-indent: 0; /* 1 */
154
- border-color: inherit; /* 2 */
155
- border-collapse: collapse; /* 3 */
156
- }
157
-
158
- /*
159
- 1. Change the font styles in all browsers.
160
- 2. Remove the margin in Firefox and Safari.
161
- 3. Remove default padding in all browsers.
162
- */
163
-
164
- button,
165
- input,
166
- optgroup,
167
- select,
168
- textarea {
169
- font-family: inherit; /* 1 */
170
- font-size: 100%; /* 1 */
171
- font-weight: inherit; /* 1 */
172
- line-height: inherit; /* 1 */
173
- color: inherit; /* 1 */
174
- margin: 0; /* 2 */
175
- padding: 0; /* 3 */
176
- }
177
-
178
- /*
179
- Remove the inheritance of text transform in Edge and Firefox.
180
- */
181
-
182
- button,
183
- select {
184
- text-transform: none;
185
- }
186
-
187
- /*
188
- 1. Correct the inability to style clickable types in iOS and Safari.
189
- 2. Remove default button styles.
190
- */
191
-
192
- button,
193
- [type='button'],
194
- [type='reset'],
195
- [type='submit'] {
196
- -webkit-appearance: button; /* 1 */
197
- background-color: transparent; /* 2 */
198
- background-image: none; /* 2 */
199
- }
200
-
201
- /*
202
- Use the modern Firefox focus style for all focusable elements.
203
- */
204
-
205
- :-moz-focusring {
206
- outline: auto;
207
- }
208
-
209
- /*
210
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
211
- */
212
-
213
- :-moz-ui-invalid {
214
- box-shadow: none;
215
- }
216
-
217
- /*
218
- Add the correct vertical alignment in Chrome and Firefox.
219
- */
220
-
221
- progress {
222
- vertical-align: baseline;
223
- }
224
-
225
- /*
226
- Correct the cursor style of increment and decrement buttons in Safari.
227
- */
228
-
229
- ::-webkit-inner-spin-button,
230
- ::-webkit-outer-spin-button {
231
- height: auto;
232
- }
233
-
234
- /*
235
- 1. Correct the odd appearance in Chrome and Safari.
236
- 2. Correct the outline style in Safari.
237
- */
238
-
239
- [type='search'] {
240
- -webkit-appearance: textfield; /* 1 */
241
- outline-offset: -2px; /* 2 */
242
- }
243
-
244
- /*
245
- Remove the inner padding in Chrome and Safari on macOS.
246
- */
247
-
248
- ::-webkit-search-decoration {
249
- -webkit-appearance: none;
250
- }
251
-
252
- /*
253
- 1. Correct the inability to style clickable types in iOS and Safari.
254
- 2. Change font properties to `inherit` in Safari.
255
- */
256
-
257
- ::-webkit-file-upload-button {
258
- -webkit-appearance: button; /* 1 */
259
- font: inherit; /* 2 */
260
- }
261
-
262
- /*
263
- Add the correct display in Chrome and Safari.
264
- */
265
-
266
- summary {
267
- display: list-item;
268
- }
269
-
270
- /*
271
- Removes the default spacing and border for appropriate elements.
272
- */
273
-
274
- blockquote,
275
- dl,
276
- dd,
277
- h1,
278
- h2,
279
- h3,
280
- h4,
281
- h5,
282
- h6,
283
- hr,
284
- figure,
285
- p,
286
- pre {
287
- margin: 0;
288
- }
289
-
290
- fieldset {
291
- margin: 0;
292
- padding: 0;
293
- }
294
-
295
- legend {
296
- padding: 0;
297
- }
298
-
299
- ol,
300
- ul,
301
- menu {
302
- list-style: none;
303
- margin: 0;
304
- padding: 0;
305
- }
306
-
307
- /*
308
- Prevent resizing textareas horizontally by default.
309
- */
310
-
311
- textarea {
312
- resize: vertical;
313
- }
314
-
315
- /*
316
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
317
- 2. Set the default placeholder color to the user's configured gray 400 color.
318
- */
319
-
320
- input::-moz-placeholder, textarea::-moz-placeholder {
321
- opacity: 1; /* 1 */
322
- color: #9CA3AF; /* 2 */
323
- }
324
-
325
- input::placeholder,
326
- textarea::placeholder {
327
- opacity: 1; /* 1 */
328
- color: #9CA3AF; /* 2 */
329
- }
330
-
331
- /*
332
- Set the default cursor for buttons.
333
- */
334
-
335
- button,
336
- [role="button"] {
337
- cursor: pointer;
338
- }
339
-
340
- /*
341
- Make sure disabled buttons don't get the pointer cursor.
342
- */
343
- :disabled {
344
- cursor: default;
345
- }
346
-
347
- /*
348
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
349
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
350
- This can trigger a poorly considered lint error in some tools but is included by design.
351
- */
352
-
353
- img,
354
- svg,
355
- video,
356
- canvas,
357
- audio,
358
- iframe,
359
- embed,
360
- object {
361
- display: block; /* 1 */
362
- vertical-align: middle; /* 2 */
363
- }
364
-
365
- /*
366
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
367
- */
368
-
369
- img,
370
- video {
371
- max-width: 100%;
372
- height: auto;
373
- }
374
-
375
- /* Make elements with the HTML hidden attribute stay hidden by default */
376
- [hidden] {
377
- display: none;
378
- }
379
-
380
- [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'],[multiple],textarea,select{
381
- -webkit-appearance: none;
382
- -moz-appearance: none;
383
- appearance: none;
384
- background-color: #fff;
385
- border-color: #6B7280;
386
- border-width: 1px;
387
- border-radius: 0px;
388
- padding-top: 0.5rem;
389
- padding-right: 0.75rem;
390
- padding-bottom: 0.5rem;
391
- padding-left: 0.75rem;
392
- font-size: 1rem;
393
- line-height: 1.5rem;
394
- --tw-shadow: 0 0 #0000;}
395
-
396
- [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
397
- outline: 2px solid transparent;
398
- outline-offset: 2px;
399
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
400
- --tw-ring-offset-width: 0px;
401
- --tw-ring-offset-color: #fff;
402
- --tw-ring-color: #0284C7;
403
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
404
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
405
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
406
- border-color: #0284C7}
407
-
408
- input::-moz-placeholder, textarea::-moz-placeholder{
409
- color: #6B7280;
410
- opacity: 1}
411
-
412
- input::placeholder,textarea::placeholder{
413
- color: #6B7280;
414
- opacity: 1}
415
-
416
- ::-webkit-datetime-edit-fields-wrapper{
417
- padding: 0}
418
-
419
- ::-webkit-date-and-time-value{
420
- min-height: 1.5em}
421
-
422
- ::-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{
423
- padding-top: 0;
424
- padding-bottom: 0}
425
-
426
- select{
427
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
428
- background-position: right 0.5rem center;
429
- background-repeat: no-repeat;
430
- background-size: 1.5em 1.5em;
431
- padding-right: 2.5rem;
432
- -webkit-print-color-adjust: exact;
433
- print-color-adjust: exact}
434
-
435
- [multiple]{
436
- background-image: initial;
437
- background-position: initial;
438
- background-repeat: unset;
439
- background-size: initial;
440
- padding-right: 0.75rem;
441
- -webkit-print-color-adjust: unset;
442
- print-color-adjust: unset}
443
-
444
- [type='checkbox'],[type='radio']{
445
- -webkit-appearance: none;
446
- -moz-appearance: none;
447
- appearance: none;
448
- padding: 0;
449
- -webkit-print-color-adjust: exact;
450
- print-color-adjust: exact;
451
- display: inline-block;
452
- vertical-align: middle;
453
- background-origin: border-box;
454
- -webkit-user-select: none;
455
- -moz-user-select: none;
456
- user-select: none;
457
- flex-shrink: 0;
458
- height: 1rem;
459
- width: 1rem;
460
- color: #0284C7;
461
- background-color: #fff;
462
- border-color: #6B7280;
463
- border-width: 1px;
464
- --tw-shadow: 0 0 #0000}
465
-
466
- [type='checkbox']{
467
- border-radius: 0px}
468
-
469
- [type='radio']{
470
- border-radius: 100%}
471
-
472
- [type='checkbox']:focus,[type='radio']:focus{
473
- outline: 2px solid transparent;
474
- outline-offset: 2px;
475
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
476
- --tw-ring-offset-width: 2px;
477
- --tw-ring-offset-color: #fff;
478
- --tw-ring-color: #0284C7;
479
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
480
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
481
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
482
-
483
- [type='checkbox']:checked,[type='radio']:checked{
484
- border-color: transparent;
485
- background-color: currentColor;
486
- background-size: 100% 100%;
487
- background-position: center;
488
- background-repeat: no-repeat}
489
-
490
- [type='checkbox']:checked{
491
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}
492
-
493
- [type='radio']:checked{
494
- 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")}
495
-
496
- [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
497
- border-color: transparent;
498
- background-color: currentColor}
499
-
500
- [type='checkbox']:indeterminate{
501
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
502
- border-color: transparent;
503
- background-color: currentColor;
504
- background-size: 100% 100%;
505
- background-position: center;
506
- background-repeat: no-repeat}
507
-
508
- [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
509
- border-color: transparent;
510
- background-color: currentColor}
511
-
512
- [type='file']{
513
- background: unset;
514
- border-color: inherit;
515
- border-width: 0;
516
- border-radius: 0;
517
- padding: 0;
518
- font-size: unset;
519
- line-height: inherit}
520
-
521
- [type='file']:focus{
522
- outline: 1px solid ButtonText;
523
- outline: 1px auto -webkit-focus-ring-color}
524
- html{
525
- scroll-behavior: smooth;
526
- font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
527
- --tw-text-opacity: 1;
528
- color: rgb(17 24 39 / var(--tw-text-opacity))}
529
- @media (prefers-reduced-motion: no-preference){
530
-
531
- html{
532
- scroll-behavior: auto}}
533
-
534
- a{
535
- color: currentColor;
536
- text-decoration-line: underline;
537
- text-underline-offset: 2px}
538
-
539
- [x-cloak] {
540
- display: none !important;
541
- }
542
-
543
- *, ::before, ::after{
544
- --tw-border-spacing-x: 0;
545
- --tw-border-spacing-y: 0;
546
- --tw-translate-x: 0;
547
- --tw-translate-y: 0;
548
- --tw-rotate: 0;
549
- --tw-skew-x: 0;
550
- --tw-skew-y: 0;
551
- --tw-scale-x: 1;
552
- --tw-scale-y: 1;
553
- --tw-pan-x: ;
554
- --tw-pan-y: ;
555
- --tw-pinch-zoom: ;
556
- --tw-scroll-snap-strictness: proximity;
557
- --tw-gradient-from-position: ;
558
- --tw-gradient-via-position: ;
559
- --tw-gradient-to-position: ;
560
- --tw-ordinal: ;
561
- --tw-slashed-zero: ;
562
- --tw-numeric-figure: ;
563
- --tw-numeric-spacing: ;
564
- --tw-numeric-fraction: ;
565
- --tw-ring-inset: ;
566
- --tw-ring-offset-width: 0px;
567
- --tw-ring-offset-color: #fff;
568
- --tw-ring-color: rgb(14 165 233 / 0.5);
569
- --tw-ring-offset-shadow: 0 0 #0000;
570
- --tw-ring-shadow: 0 0 #0000;
571
- --tw-shadow: 0 0 #0000;
572
- --tw-shadow-colored: 0 0 #0000;
573
- --tw-blur: ;
574
- --tw-brightness: ;
575
- --tw-contrast: ;
576
- --tw-grayscale: ;
577
- --tw-hue-rotate: ;
578
- --tw-invert: ;
579
- --tw-saturate: ;
580
- --tw-sepia: ;
581
- --tw-drop-shadow: ;
582
- --tw-backdrop-blur: ;
583
- --tw-backdrop-brightness: ;
584
- --tw-backdrop-contrast: ;
585
- --tw-backdrop-grayscale: ;
586
- --tw-backdrop-hue-rotate: ;
587
- --tw-backdrop-invert: ;
588
- --tw-backdrop-opacity: ;
589
- --tw-backdrop-saturate: ;
590
- --tw-backdrop-sepia: }
591
-
592
- ::backdrop{
593
- --tw-border-spacing-x: 0;
594
- --tw-border-spacing-y: 0;
595
- --tw-translate-x: 0;
596
- --tw-translate-y: 0;
597
- --tw-rotate: 0;
598
- --tw-skew-x: 0;
599
- --tw-skew-y: 0;
600
- --tw-scale-x: 1;
601
- --tw-scale-y: 1;
602
- --tw-pan-x: ;
603
- --tw-pan-y: ;
604
- --tw-pinch-zoom: ;
605
- --tw-scroll-snap-strictness: proximity;
606
- --tw-gradient-from-position: ;
607
- --tw-gradient-via-position: ;
608
- --tw-gradient-to-position: ;
609
- --tw-ordinal: ;
610
- --tw-slashed-zero: ;
611
- --tw-numeric-figure: ;
612
- --tw-numeric-spacing: ;
613
- --tw-numeric-fraction: ;
614
- --tw-ring-inset: ;
615
- --tw-ring-offset-width: 0px;
616
- --tw-ring-offset-color: #fff;
617
- --tw-ring-color: rgb(14 165 233 / 0.5);
618
- --tw-ring-offset-shadow: 0 0 #0000;
619
- --tw-ring-shadow: 0 0 #0000;
620
- --tw-shadow: 0 0 #0000;
621
- --tw-shadow-colored: 0 0 #0000;
622
- --tw-blur: ;
623
- --tw-brightness: ;
624
- --tw-contrast: ;
625
- --tw-grayscale: ;
626
- --tw-hue-rotate: ;
627
- --tw-invert: ;
628
- --tw-saturate: ;
629
- --tw-sepia: ;
630
- --tw-drop-shadow: ;
631
- --tw-backdrop-blur: ;
632
- --tw-backdrop-brightness: ;
633
- --tw-backdrop-contrast: ;
634
- --tw-backdrop-grayscale: ;
635
- --tw-backdrop-hue-rotate: ;
636
- --tw-backdrop-invert: ;
637
- --tw-backdrop-opacity: ;
638
- --tw-backdrop-saturate: ;
639
- --tw-backdrop-sepia: }
640
- [data-coco] .tippy-box{
641
- white-space: normal;
642
- background-color: transparent;
643
- font-size: 16px;
644
- line-height: 20px;
645
- --tw-text-opacity: 1;
646
- color: rgb(17 24 39 / var(--tw-text-opacity))}
647
- [data-coco] .tippy-content{
648
- padding: 0px}
649
- /* arrow border */
650
- [data-coco] .tippy-svg-arrow > svg:first-child{
651
- fill: transparent}
652
- /* arrow background */
653
- [data-coco] .tippy-svg-arrow > svg:last-child{
654
- fill: transparent}
655
- /* Tooltip theme */
656
- .tippy-box[data-theme~="coco-tooltip"]{
657
- border-radius: 0.5rem;
658
- --tw-bg-opacity: 1;
659
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
660
- font-size: 14px;
661
- line-height: 16px;
662
- --tw-text-opacity: 1;
663
- color: rgb(255 255 255 / var(--tw-text-opacity));
664
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
665
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
666
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
667
- .tippy-box[data-theme~="coco-tooltip"] .tippy-content{
668
- max-width: 240px;
669
- overflow: hidden;
670
- text-overflow: ellipsis;
671
- white-space: nowrap;
672
- padding-left: 0.75rem;
673
- padding-right: 0.75rem;
674
- padding-top: 0.5rem;
675
- padding-bottom: 0.5rem}
676
- /* arrow background */
677
- .tippy-box[data-theme~="coco-tooltip"] .tippy-svg-arrow > svg:first-child{
678
- display: none}
679
- .tippy-box[data-theme~="coco-tooltip"] .tippy-svg-arrow > svg:last-child{
680
- fill: #111827}
681
- [x-dropdown] [x-dropdown\:content]{
682
- display: none}
683
- [data-coco]{
684
- font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
685
- --tw-text-opacity: 1;
686
- color: rgb(17 24 39 / var(--tw-text-opacity));
687
-
688
- -webkit-font-smoothing: antialiased;
689
- -moz-osx-font-smoothing: grayscale}
690
- [data-coco] h1,
691
- [data-coco] h2,
692
- [data-coco] h3,
693
- [data-coco] h4,
694
- [data-coco] h5,
695
- [data-coco] h6{
696
- font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
697
- /*
698
- * Tippy dropdown theme
699
- */
700
- .tippy-box[data-theme~="coco-app-dropdown"],
701
- .tippy-box[data-theme~="coco-app-menu"]{
702
- border-radius: 0.5rem;
703
- border-width: 1px;
704
- border-style: solid;
705
- --tw-bg-opacity: 1;
706
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
707
- font-size: 14px;
708
- line-height: 16px;
709
- --tw-text-opacity: 1;
710
- color: rgb(17 24 39 / var(--tw-text-opacity));
711
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
712
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
713
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
714
- border-color: rgba(0, 12, 39, 0.1)}
715
- [data-coco].coco-button{
716
- display: inline-flex;
717
- width: auto;
718
- flex: none;
719
- -webkit-user-select: none;
720
- -moz-user-select: none;
721
- user-select: none;
722
- border-width: 1px;
723
- border-color: transparent;
724
- background-color: transparent;
725
- color: currentColor;
726
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
727
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
728
- transition-duration: 150ms;
729
- outline: 2px solid transparent;
730
- outline-offset: 2px}
731
- [data-coco].coco-button:focus-visible{
732
- outline-width: 0px}
733
- [data-coco].coco-button {
734
- width: -moz-min-content;
735
- width: min-content;
736
- }
737
- [data-coco].coco-button .button-element{
738
- display: inline-flex;
739
- width: 100%;
740
- text-decoration-line: none}
741
- [data-coco].coco-button .button-inner{
742
- margin-left: auto;
743
- margin-right: auto;
744
- display: inline-flex;
745
- align-items: center;
746
- gap: 0.5rem;
747
- text-align: center;
748
- width: -moz-fit-content;
749
- width: fit-content}
750
- [data-coco].coco-button .button-content{
751
- position: relative;
752
- order: 2;
753
- display: inline-flex;
754
- align-items: center;
755
- white-space: nowrap;
756
- line-height: 1}
757
- [data-coco].coco-button .button-state-content{
758
- display: contents}
759
- [data-coco].coco-button .button-icon{
760
- order: 1;
761
- display: inline-flex;
762
- align-items: center}
763
- [data-coco].coco-button .button-dropdown{
764
- display: contents;
765
- border-radius: 0.375rem}
766
- [data-coco].coco-button .button-toggle{
767
- order: 3}
768
- /* disabled */
769
- [data-coco].coco-button[data-disabled="true"] .button-element{
770
- cursor: not-allowed}
771
- /* loading */
772
- @keyframes spin{
773
-
774
- to{
775
- transform: rotate(360deg)}}
776
- [data-coco].coco-button[data-state="loading"] .button-icon{
777
- animation: spin 1.5s linear infinite}
778
- /* Fit */
779
- [data-coco].coco-button[data-fit="full"]{
780
- width: 100%}
781
- /* Icons */
782
- [data-coco].coco-button[data-icon-position="end"] .button-content{
783
- order: 1}
784
- [data-coco].coco-button[data-icon-position="end"] .button-icon{
785
- order: 2}
786
- [data-coco].coco-button[data-icon-position="end"] .button-toggle{
787
- order: 3}
788
- [data-coco].coco-button.with-icon[data-collapsed="true"] .button-content {
789
- display: none;
790
- }
791
- [data-coco][data-component="dropdown"] {
792
- width: -moz-fit-content;
793
- width: fit-content;
794
- }
795
- [data-coco][data-component="dropdown"] .dropdown-trigger{
796
- cursor: pointer;
797
- width: -moz-fit-content;
798
- width: fit-content}
799
- @supports (aspect-ratio: 1 / 1){
800
-
801
- [data-coco][data-component="youtube-embed"]{
802
- aspect-ratio: 16/9}}
803
- @supports not (aspect-ratio: 1 / 1){
804
-
805
- [data-coco][data-component="youtube-embed"]::before{
806
- content: "";
807
- float: left;
808
- padding-top: calc(100% / (16/9))}
809
-
810
- [data-coco][data-component="youtube-embed"]::after{
811
- clear: left;
812
- content: "";
813
- display: block}}
814
- [data-coco][data-component="youtube-embed"] iframe{
815
- height: 100%;
816
- width: 100%}
817
- [data-coco][data-component="icon"]{
818
- display: inline-flex;
819
- height: 1.5rem;
820
- width: 1.5rem;
821
- flex: none;
822
- color: currentColor}
823
- [data-coco][data-component="icon"] svg{
824
- height: 100%;
825
- width: 100%;
826
- color: currentColor;
827
- stroke-linecap: round;
828
- stroke-linejoin: round}
829
- /* Styles */
830
- [data-coco][data-component="icon"][data-icon]:not([data-style="fill"]) svg{
831
- fill: none;
832
- stroke: currentColor;
833
- stroke-width: 2}
834
- [data-coco][data-component="icon"][data-icon][data-style="fill"] svg{
835
- fill: currentColor}
836
- /* Sizes */
837
- [data-coco][data-component="icon"][data-size="sm"]{
838
- height: 1rem;
839
- width: 1rem}
840
- [data-coco][data-component="icon"][data-size="md"]{
841
- height: 1.25rem;
842
- width: 1.25rem}
843
- [data-coco][data-component="icon"][data-size="lg"]{
844
- height: 1.5rem;
845
- width: 1.5rem}
846
- [data-coco][data-component="icon"][data-size="xl"]{
847
- height: 2.25rem;
848
- width: 2.25rem}
849
- [data-coco][data-component="icon"][data-size="xxl"]{
850
- height: 3rem;
851
- width: 3rem}
852
- /* Motion */
853
- @keyframes spin{
854
-
855
- to{
856
- transform: rotate(360deg)}}
857
- [data-coco][data-component="icon"][data-spin="true"] svg{
858
- animation: spin 1.5s linear infinite}
859
- @keyframes spin{
860
-
861
- to{
862
- transform: rotate(360deg)}}
863
- [data-coco][data-component="icon"][data-spin="reverse"] svg{
864
- animation: spin 1.5s linear infinite reverse}
865
- [data-coco][data-component="image"]{
866
- display: block;
867
- max-width: 100%}
868
- [data-coco][data-component="image-uploader"]{
869
- display: contents}
870
- [data-coco][data-component="image-uploader"][data-click="true"]{
871
- cursor: pointer}
872
- [data-coco][data-component="image-uploader"] .uploader-input{
873
- display: none}
874
- [data-coco].coco-link{
875
- display: inline-flex;
876
- align-items: center}
877
- [data-coco].coco-link[data-icon-position="start"] .link-text{
878
- order: 2}
879
- [data-coco].coco-link[data-icon-position="start"] [data-component="icon"]{
880
- order: 1;
881
- margin-right: 0.4em}
882
- [data-coco].coco-link[data-icon-position="end"] .link-text{
883
- order: 1;
884
- margin-right: 0.4em}
885
- [data-coco].coco-link[data-icon-position="end"] [data-component="icon"]{
886
- order: 2}
887
- [data-coco][data-component="placeholder"]{
888
- border-width: 1px;
889
- border-style: dashed;
890
- --tw-border-opacity: 1;
891
- border-color: rgb(156 163 175 / var(--tw-border-opacity));
892
- --tw-bg-opacity: 1;
893
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
894
- padding: 1rem;
895
- text-align: center}
896
- [data-coco][data-component="placeholder"][data-size="full"]{
897
- height: 100%;
898
- width: 100%}
899
- [data-coco][data-component="placeholder"][data-size="full"] .placeholder-inner{
900
- display: flex;
901
- height: 100%;
902
- width: 100%;
903
- align-items: center;
904
- justify-content: center}
905
- [data-coco][data-component="placeholder"][data-size="full"] .placeholder-content{
906
- margin: auto}
907
- [data-coco][data-component="app-banner"]{
908
- padding-top: 0.5rem;
909
- padding-bottom: 0.5rem;
910
- text-align: center;
911
- padding-left: 0.75rem}
912
- @media (min-width: 576px){
913
-
914
- [data-coco][data-component="app-banner"]{
915
- padding-left: 1.5rem}}
916
- @media (min-width: 768px){
917
-
918
- [data-coco][data-component="app-banner"]{
919
- padding-left: 2rem}}
920
- @media (min-width: 992px){
921
-
922
- [data-coco][data-component="app-banner"]{
923
- padding-left: 2.5rem}}
924
- @media (min-width: 1200px){
925
-
926
- [data-coco][data-component="app-banner"]{
927
- padding-left: 2.75rem}}
928
- [data-coco][data-component="app-banner"]{
929
- padding-right: 0.75rem}
930
- @media (min-width: 576px){
931
-
932
- [data-coco][data-component="app-banner"]{
933
- padding-right: 1.5rem}}
934
- @media (min-width: 768px){
935
-
936
- [data-coco][data-component="app-banner"]{
937
- padding-right: 2rem}}
938
- @media (min-width: 992px){
939
-
940
- [data-coco][data-component="app-banner"]{
941
- padding-right: 2.5rem}}
942
- @media (min-width: 1200px){
943
-
944
- [data-coco][data-component="app-banner"]{
945
- padding-right: 2.75rem}}
946
- [data-coco][data-component="app-navbar"]{
947
- container-type: inline-size}
948
- [data-coco][data-component="app-navbar"] .nav-content{
949
- display: flex;
950
- height: 2.75rem;
951
- align-items: center;
952
- --tw-bg-opacity: 1;
953
- background-color: rgb(15 118 110 / var(--tw-bg-opacity));
954
- padding-left: 0.75rem}
955
- @media (min-width: 576px){
956
-
957
- [data-coco][data-component="app-navbar"] .nav-content{
958
- padding-left: 1.5rem}}
959
- @media (min-width: 768px){
960
-
961
- [data-coco][data-component="app-navbar"] .nav-content{
962
- padding-left: 2rem}}
963
- @media (min-width: 992px){
964
-
965
- [data-coco][data-component="app-navbar"] .nav-content{
966
- padding-left: 2.5rem}}
967
- @media (min-width: 1200px){
968
-
969
- [data-coco][data-component="app-navbar"] .nav-content{
970
- padding-left: 2.75rem}}
971
- [data-coco][data-component="app-navbar"] .nav-content{
972
- padding-right: 0.75rem}
973
- @media (min-width: 576px){
974
-
975
- [data-coco][data-component="app-navbar"] .nav-content{
976
- padding-right: 1.5rem}}
977
- @media (min-width: 768px){
978
-
979
- [data-coco][data-component="app-navbar"] .nav-content{
980
- padding-right: 2rem}}
981
- @media (min-width: 992px){
982
-
983
- [data-coco][data-component="app-navbar"] .nav-content{
984
- padding-right: 2.5rem}}
985
- @media (min-width: 1200px){
986
-
987
- [data-coco][data-component="app-navbar"] .nav-content{
988
- padding-right: 2.75rem}}
989
- @container (min-width: 32rem){
990
-
991
- [data-coco][data-component="app-navbar"] .nav-content{
992
- height: 3.5rem}}
993
- [data-coco][data-component="app-navbar"] .nav-logo{
994
- margin-right: 2rem;
995
- flex: none}
996
- [data-coco][data-component="app-navbar"] .nav-logo-small{
997
- height: 1.5rem}
998
- @container (min-width: 32rem){
999
-
1000
- [data-coco][data-component="app-navbar"] .nav-logo-small{
1001
- display: none}}
1002
- [data-coco][data-component="app-navbar"] .nav-logo-full{
1003
- display: none;
1004
- height: 1.75rem}
1005
- @container (min-width: 32rem){
1006
-
1007
- [data-coco][data-component="app-navbar"] .nav-logo-full{
1008
- display: block}}
1009
- [data-coco][data-component="app-navbar"] .nav-links{
1010
- display: flex;
1011
- width: 100%;
1012
- align-items: center;
1013
- overflow: hidden}
1014
- [data-coco][data-component="app-navbar"] .nav-link-group{
1015
- display: flex;
1016
- align-items: center;
1017
- -moz-column-gap: 1.5rem;
1018
- column-gap: 1.5rem}
1019
- [data-coco][data-component="app-navbar"] .nav-link-group .nav-button > .button-inner{
1020
- gap: 0.5rem;
1021
- white-space: nowrap;
1022
- padding-top: 0.5rem;
1023
- padding-bottom: 0.5rem;
1024
- font-size: 14px;
1025
- line-height: 16px;
1026
- --tw-text-opacity: 1;
1027
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1028
- @container (min-width: 64rem){
1029
-
1030
- [data-coco][data-component="app-navbar"] .nav-link-group .nav-button > .button-inner{
1031
- font-size: 16px;
1032
- line-height: 20px}}
1033
- [data-coco][data-component="app-navbar"] .nav-link-group .nav-button [data-component="icon"]{
1034
- height: 1rem;
1035
- width: 1rem}
1036
- [data-coco][data-component="app-navbar"] .nav-secondary{
1037
- margin-left: auto}
1038
- [data-coco][data-component="app-navbar"] .nav-mobile-controls{
1039
- margin-left: auto;
1040
- margin-right: -0.5rem;
1041
- display: flex;
1042
- align-items: center;
1043
- --tw-text-opacity: 1;
1044
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1045
- [data-coco][data-component="app-navbar"] .nav-mobile-controls [data-component="app-button"]{
1046
- padding: 0.5rem}
1047
- [data-coco][data-component="app-nav-drawer"]{
1048
- position: fixed;
1049
- top: 0px;
1050
- left: 0px;
1051
- bottom: 0px;
1052
- height: 100vh;
1053
- width: 340px;
1054
- overflow: hidden;
1055
- --tw-bg-opacity: 1;
1056
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1057
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1058
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1059
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
1060
- [data-coco][data-component="app-nav-drawer"] .nav-inner{
1061
- padding: 1rem}
1062
- [data-coco][data-component="app-slat"]{
1063
- padding-left: 0.75rem}
1064
- @media (min-width: 576px){
1065
-
1066
- [data-coco][data-component="app-slat"]{
1067
- padding-left: 1.5rem}}
1068
- @media (min-width: 768px){
1069
-
1070
- [data-coco][data-component="app-slat"]{
1071
- padding-left: 2rem}}
1072
- @media (min-width: 992px){
1073
-
1074
- [data-coco][data-component="app-slat"]{
1075
- padding-left: 2.5rem}}
1076
- @media (min-width: 1200px){
1077
-
1078
- [data-coco][data-component="app-slat"]{
1079
- padding-left: 2.75rem}}
1080
- [data-coco][data-component="app-slat"]{
1081
- padding-right: 0.75rem}
1082
- @media (min-width: 576px){
1083
-
1084
- [data-coco][data-component="app-slat"]{
1085
- padding-right: 1.5rem}}
1086
- @media (min-width: 768px){
1087
-
1088
- [data-coco][data-component="app-slat"]{
1089
- padding-right: 2rem}}
1090
- @media (min-width: 992px){
1091
-
1092
- [data-coco][data-component="app-slat"]{
1093
- padding-right: 2.5rem}}
1094
- @media (min-width: 1200px){
1095
-
1096
- [data-coco][data-component="app-slat"]{
1097
- padding-right: 2.75rem}}
1098
- [data-coco][data-component="app-slat"][data-padded="false"]{
1099
- padding-left: 0px;
1100
- padding-right: 0px}
1101
- [data-coco][data-component="app-slide-editor"] .editor-toolbar{
1102
- margin-bottom: 1rem}
1103
- @media (min-width: 1200px){
1104
-
1105
- [data-coco][data-component="app-slide-editor"] .editor-toolbar{
1106
- margin-bottom: 1.5rem}}
1107
- [data-coco][data-component="app-slide-editor"] .editor-slide{
1108
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1109
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1110
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
1111
- [data-coco][data-component="app-slide-editor"] .editor-slide textarea{
1112
- width: 100%;
1113
- flex: none}
1114
- [data-coco][data-component="app-slide-editor"] .coco-button.editor-saving{
1115
- cursor: not-allowed}
1116
- [data-coco][data-component="app-slide-editor"] .editor-thumbnail-file{
1117
- pointer-events: none;
1118
- display: none}
1119
- [data-coco][data-component="app-slide-editor"] .editor-screenshot-wrapper{
1120
- position: relative;
1121
- width: 0px;
1122
- overflow: hidden}
1123
- [data-coco][data-component="app-slide-editor"] .editor-screenshot{
1124
- pointer-events: none;
1125
- position: absolute;
1126
- top: 0px;
1127
- z-index: -1000;
1128
- width: 800px}
1129
- [data-coco][data-component="app-slide-editor"] .editor-icon-bg-color{
1130
- fill: currentColor;
1131
- stroke: #111827;
1132
- stroke-width: 2px}
1133
- [data-coco][data-component="app-slide-editor"] .editor-icon-text-color {
1134
- }
1135
- [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea{
1136
- outline-style: solid;
1137
- outline-width: 1px;
1138
- outline-offset: 0px;
1139
- outline-color: transparent}
1140
- [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::-moz-placeholder{
1141
- font-style: italic}
1142
- [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::placeholder{
1143
- font-style: italic}
1144
- [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:hover,
1145
- [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:focus {
1146
- outline-color: rgba(0, 0, 0, 0.3);
1147
- }
1148
- [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:hover,
1149
- [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:focus {
1150
- outline-color: rgba(255, 255, 255, 0.3);
1151
- }
1152
- [data-coco][data-component="app-alert"]{
1153
- overflow: hidden;
1154
- border-radius: 0.75rem;
1155
- border-width: 1px;
1156
- border-color: transparent;
1157
- container-type: inline-size}
1158
- [data-coco][data-component="app-alert"] .alert-container{
1159
- position: relative;
1160
- display: flex;
1161
- align-items: flex-start;
1162
- padding: 1rem}
1163
- [data-coco][data-component="app-alert"] .alert-icon{
1164
- display: flex;
1165
- align-items: center;
1166
- border-radius: 9999px;
1167
- padding: 0.5rem}
1168
- [data-coco][data-component="app-alert"] .alert-icon .coco-icon{
1169
- height: 1.25rem;
1170
- width: 1.25rem}
1171
- [data-coco][data-component="app-alert"] .alert-body{
1172
- padding-left: 1rem;
1173
- padding-right: 0.5rem}
1174
- [data-coco][data-component="app-alert"] .alert-content{
1175
- width: 100%;
1176
- --tw-text-opacity: 1;
1177
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1178
- [data-coco][data-component="app-alert"] .alert-title{
1179
- font-size: 16px;
1180
- line-height: 24px;
1181
- font-weight: 700}
1182
- [data-coco][data-component="app-alert"] .alert-message{
1183
- font-size: 16px;
1184
- line-height: 24px}
1185
- [data-coco][data-component="app-alert"] .alert-message a{
1186
- color: currentColor}
1187
- [data-coco][data-component="app-alert"].with-title .alert-message{
1188
- margin-top: 0.25rem}
1189
- [data-coco][data-component="app-alert"] .alert-actions{
1190
- display: flex;
1191
- align-items: center}
1192
- [data-coco][data-component="app-alert"] .alert-actions > :not([hidden]) ~ :not([hidden]){
1193
- --tw-space-x-reverse: 0;
1194
- margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1195
- margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))}
1196
- [data-coco][data-component="app-alert"].vivid .alert-actions > :not([hidden]) ~ :not([hidden]){
1197
- --tw-space-x-reverse: 0;
1198
- margin-right: calc(0.75rem * var(--tw-space-x-reverse));
1199
- margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}
1200
- [data-coco][data-component="app-alert"] .alert-link{
1201
- margin-top: 0.5rem}
1202
- /* Banner style */
1203
- [data-coco][data-component="app-alert"][data-banner="true"]{
1204
- border-radius: 0px}
1205
- @container (min-width: 1000px){
1206
-
1207
- [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
1208
- justify-content: center}
1209
-
1210
- [data-coco][data-component="app-alert"][data-banner="true"] .alert-body{
1211
- width: auto}}
1212
- /* Dismissable */
1213
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
1214
- flex: none}
1215
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button .button-element{
1216
- --tw-text-opacity: 1;
1217
- color: rgb(31 41 55 / var(--tw-text-opacity))}
1218
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button .button-element:hover{
1219
- --tw-text-opacity: 1;
1220
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1221
- [data-coco][data-component="app-alert"] .alert-title {
1222
- matgin-top: -1px;
1223
- margin-bottom: 2px;
1224
- }
1225
- [data-coco][data-component="app-alert"] .alert-actions{
1226
- margin-top: 0.5rem}
1227
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-container{
1228
- padding-right: 3rem}
1229
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
1230
- position: absolute;
1231
- top: 0.5rem;
1232
- right: 0.5rem;
1233
- margin-left: auto}
1234
- @container (min-width: 500px){
1235
- [data-coco][data-component="app-alert"] .alert-container{
1236
- align-items: center}
1237
-
1238
- [data-coco][data-component="app-alert"] .alert-icon{
1239
- align-self: center}
1240
-
1241
- [data-coco][data-component="app-alert"] .alert-body{
1242
- display: flex;
1243
- width: 100%;
1244
- align-items: center}
1245
-
1246
- [data-coco][data-component="app-alert"] .alert-content{
1247
- margin-right: 1rem}
1248
-
1249
- [data-coco][data-component="app-alert"] .alert-title {
1250
- margin-bottom: 0;
1251
- }
1252
-
1253
- [data-coco][data-component="app-alert"] .alert-actions{
1254
- margin-top: 0px;
1255
- margin-left: auto}
1256
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-container{
1257
- padding-right: 0.75rem}
1258
-
1259
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
1260
- position: relative;
1261
- top: auto;
1262
- right: auto;
1263
- display: flex;
1264
- flex-direction: column}}
1265
- /* Layout */
1266
- @container (min-width: 1000px){
1267
- [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-content{
1268
- display: flex;
1269
- width: 100%;
1270
- align-items: center}
1271
- [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-content > :not([hidden]) ~ :not([hidden]){
1272
- --tw-space-x-reverse: 0;
1273
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1274
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
1275
-
1276
- [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-title{
1277
- white-space: nowrap}
1278
-
1279
- [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-link{
1280
- display: none}
1281
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-container{
1282
- align-items: center}
1283
-
1284
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-icon{
1285
- align-self: center}
1286
-
1287
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-body{
1288
- display: flex;
1289
- width: 100%;
1290
- align-items: center}
1291
-
1292
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-content{
1293
- margin-right: 1rem}
1294
-
1295
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-title {
1296
- margin-bottom: 0;
1297
- }
1298
-
1299
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-actions{
1300
- margin-top: 0px;
1301
- margin-left: auto}
1302
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-container{
1303
- padding-right: 0.75rem}
1304
-
1305
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-dismiss{
1306
- position: relative;
1307
- top: auto;
1308
- right: auto;
1309
- display: flex;
1310
- flex-direction: column}}
1311
- /* Themes */
1312
- [data-coco][data-component="app-alert"][data-theme]{
1313
- transition-property: all;
1314
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1315
- transition-duration: 150ms}
1316
- [data-coco][data-component="app-alert"][data-theme*="vivid"]{
1317
- border-style: none}
1318
- [data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-content{
1319
- --tw-text-opacity: 1;
1320
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1321
- [data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-icon{
1322
- --tw-text-opacity: 1;
1323
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1324
- [data-coco][data-component="app-alert"][data-theme*="vivid"] .coco_link:not([data-theme]){
1325
- --tw-text-opacity: 1;
1326
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1327
- [data-coco][data-component="app-alert"][data-theme="positive"]{
1328
- --tw-border-opacity: 1;
1329
- border-color: rgb(118 184 170 / var(--tw-border-opacity));
1330
- --tw-bg-opacity: 1;
1331
- background-color: rgb(209 231 226 / var(--tw-bg-opacity))}
1332
- [data-coco][data-component="app-alert"][data-theme="positive"]:hover{
1333
- --tw-border-opacity: 1;
1334
- border-color: rgb(72 160 141 / var(--tw-border-opacity))}
1335
- [data-coco][data-component="app-alert"][data-theme="positive"] .alert-icon{
1336
- --tw-bg-opacity: 1;
1337
- background-color: rgb(163 207 197 / var(--tw-bg-opacity));
1338
- --tw-text-opacity: 1;
1339
- color: rgb(26 136 113 / var(--tw-text-opacity))}
1340
- [data-coco][data-component="app-alert"][data-theme="positive-vivid"]{
1341
- --tw-bg-opacity: 1;
1342
- background-color: rgb(26 136 113 / var(--tw-bg-opacity))}
1343
- [data-coco][data-component="app-alert"][data-theme="positive-vivid"] .alert-icon{
1344
- --tw-bg-opacity: 1;
1345
- background-color: rgb(13 97 89 / var(--tw-bg-opacity))}
1346
- [data-coco][data-component="app-alert"][data-theme="warning"]{
1347
- --tw-border-opacity: 1;
1348
- border-color: rgb(252 211 77 / var(--tw-border-opacity));
1349
- --tw-bg-opacity: 1;
1350
- background-color: rgb(255 251 235 / var(--tw-bg-opacity))}
1351
- [data-coco][data-component="app-alert"][data-theme="warning"]:hover{
1352
- --tw-border-opacity: 1;
1353
- border-color: rgb(251 191 36 / var(--tw-border-opacity))}
1354
- [data-coco][data-component="app-alert"][data-theme="warning"] .alert-icon{
1355
- --tw-bg-opacity: 1;
1356
- background-color: rgb(254 243 199 / var(--tw-bg-opacity));
1357
- --tw-text-opacity: 1;
1358
- color: rgb(217 119 6 / var(--tw-text-opacity))}
1359
- [data-coco][data-component="app-alert"][data-theme="warning-vivid"]{
1360
- --tw-bg-opacity: 1;
1361
- background-color: rgb(245 158 11 / var(--tw-bg-opacity))}
1362
- [data-coco][data-component="app-alert"][data-theme="warning-vivid"] .alert-content{
1363
- --tw-text-opacity: 1;
1364
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1365
- [data-coco][data-component="app-alert"][data-theme="warning-vivid"] .alert-icon{
1366
- --tw-bg-opacity: 1;
1367
- background-color: rgb(217 119 6 / var(--tw-bg-opacity))}
1368
- [data-coco][data-component="app-alert"][data-theme="warning-vivid"] .coco-link:not([data-theme]){
1369
- --tw-text-opacity: 1;
1370
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1371
- [data-coco][data-component="app-alert"][data-theme="negative"]{
1372
- --tw-border-opacity: 1;
1373
- border-color: rgb(252 165 165 / var(--tw-border-opacity));
1374
- --tw-bg-opacity: 1;
1375
- background-color: rgb(254 226 226 / var(--tw-bg-opacity))}
1376
- [data-coco][data-component="app-alert"][data-theme="negative"]:hover{
1377
- --tw-border-opacity: 1;
1378
- border-color: rgb(248 113 113 / var(--tw-border-opacity))}
1379
- [data-coco][data-component="app-alert"][data-theme="negative"] .alert-icon{
1380
- --tw-bg-opacity: 1;
1381
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
1382
- --tw-text-opacity: 1;
1383
- color: rgb(220 38 38 / var(--tw-text-opacity))}
1384
- [data-coco][data-component="app-alert"][data-theme="negative-vivid"]{
1385
- --tw-bg-opacity: 1;
1386
- background-color: rgb(220 38 38 / var(--tw-bg-opacity))}
1387
- [data-coco][data-component="app-alert"][data-theme="negative-vivid"] .alert-icon{
1388
- --tw-bg-opacity: 1;
1389
- background-color: rgb(185 28 28 / var(--tw-bg-opacity))}
1390
- [data-coco][data-component="app-alert"][data-theme="info"]{
1391
- --tw-border-opacity: 1;
1392
- border-color: rgb(125 211 252 / var(--tw-border-opacity));
1393
- --tw-bg-opacity: 1;
1394
- background-color: rgb(224 242 254 / var(--tw-bg-opacity))}
1395
- [data-coco][data-component="app-alert"][data-theme="info"]:hover{
1396
- --tw-border-opacity: 1;
1397
- border-color: rgb(56 189 248 / var(--tw-border-opacity))}
1398
- [data-coco][data-component="app-alert"][data-theme="info"] .alert-icon{
1399
- --tw-bg-opacity: 1;
1400
- background-color: rgb(186 230 253 / var(--tw-bg-opacity));
1401
- --tw-text-opacity: 1;
1402
- color: rgb(2 132 199 / var(--tw-text-opacity))}
1403
- [data-coco][data-component="app-alert"][data-theme="info-vivid"]{
1404
- --tw-bg-opacity: 1;
1405
- background-color: rgb(2 132 199 / var(--tw-bg-opacity))}
1406
- [data-coco][data-component="app-alert"][data-theme="info-vivid"] .alert-icon{
1407
- --tw-bg-opacity: 1;
1408
- background-color: rgb(3 105 161 / var(--tw-bg-opacity))}
1409
- /* Themes */
1410
- [data-coco][data-component="app-button"][data-theme]{
1411
- overflow: hidden;
1412
- transition-property: all;
1413
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1414
- transition-duration: 150ms;
1415
- border-radius: 44px}
1416
- [data-coco][data-component="app-button"][data-theme] .button-content{
1417
- font-weight: 600}
1418
- [data-coco][data-component="app-button"][data-theme="primary"],
1419
- [data-coco][data-component="app-button"][data-theme="positive"]{
1420
- --tw-bg-opacity: 1;
1421
- background-color: rgb(26 136 113 / var(--tw-bg-opacity));
1422
- --tw-text-opacity: 1;
1423
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1424
- [data-coco][data-component="app-button"][data-theme="primary"]:hover,
1425
- [data-coco][data-component="app-button"][data-theme="positive"]:hover{
1426
- --tw-bg-opacity: 1;
1427
- background-color: rgb(19 116 100 / var(--tw-bg-opacity))}
1428
- [data-coco][data-component="app-button"][data-theme="primary"]:active,
1429
- [data-coco][data-component="app-button"][data-theme="positive"]:active{
1430
- --tw-bg-opacity: 1;
1431
- background-color: rgb(13 97 89 / var(--tw-bg-opacity))}
1432
- [data-coco][data-component="app-button"][data-theme="primary"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="positive"][data-state="loading"]{
1433
- --tw-bg-opacity: 1;
1434
- background-color: rgb(26 136 113 / var(--tw-bg-opacity))}
1435
- [data-coco][data-component="app-button"][data-theme="primary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="positive"][data-state="active"]{
1436
- --tw-bg-opacity: 1;
1437
- background-color: rgb(13 97 89 / var(--tw-bg-opacity))}
1438
- [data-coco][data-component="app-button"][data-theme="primary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="positive"][data-state="loading"] .button-icon{
1439
- --tw-text-opacity: 1;
1440
- color: rgb(118 184 170 / var(--tw-text-opacity))}
1441
- [data-coco][data-component="app-button"][data-theme="primary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="positive"][data-disabled="true"]{
1442
- --tw-bg-opacity: 1;
1443
- background-color: rgb(163 207 197 / var(--tw-bg-opacity))}
1444
- [data-coco][data-component="app-button"][data-theme="text-primary"],
1445
- [data-coco][data-component="app-button"][data-theme="text-positive"]{
1446
- background-color: transparent;
1447
- --tw-text-opacity: 1;
1448
- color: rgb(26 136 113 / var(--tw-text-opacity))}
1449
- [data-coco][data-component="app-button"][data-theme="text-primary"]:hover,
1450
- [data-coco][data-component="app-button"][data-theme="text-positive"]:hover{
1451
- background-color: rgba(0, 12, 39, 0.06);
1452
- background-blend-mode: hard-light}
1453
- [data-coco][data-component="app-button"][data-theme="text-primary"]:active,
1454
- [data-coco][data-component="app-button"][data-theme="text-positive"]:active{
1455
- background-color: rgba(0, 12, 39, 0.1);
1456
- background-blend-mode: hard-light}
1457
- [data-coco][data-component="app-button"][data-theme="text-primary"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="text-positive"][data-state="loading"]{
1458
- background-color: transparent}
1459
- [data-coco][data-component="app-button"][data-theme="text-primary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="text-positive"][data-state="active"]{
1460
- background-color: rgba(0, 12, 39, 0.1);
1461
- background-blend-mode: hard-light}
1462
- [data-coco][data-component="app-button"][data-theme="text-primary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="text-positive"][data-state="loading"] .button-icon{
1463
- --tw-text-opacity: 1;
1464
- color: rgb(118 184 170 / var(--tw-text-opacity))}
1465
- [data-coco][data-component="app-button"][data-theme="text-primary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="text-positive"][data-disabled="true"]{
1466
- background-color: transparent;
1467
- opacity: 0.3}
1468
- [data-coco][data-component="app-button"][data-theme="secondary"],
1469
- [data-coco][data-component="app-button"][data-theme="toolbar"]{
1470
- border-color: rgba(0, 12, 39, 0.18);
1471
- background-color: transparent;
1472
- --tw-text-opacity: 1;
1473
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1474
- [data-coco][data-component="app-button"][data-theme="secondary"]:hover,
1475
- [data-coco][data-component="app-button"][data-theme="toolbar"]:hover{
1476
- background-color: rgba(0, 12, 39, 0.06);
1477
- background-blend-mode: hard-light}
1478
- [data-coco][data-component="app-button"][data-theme="secondary"]:active,
1479
- [data-coco][data-component="app-button"][data-theme="toolbar"]:active{
1480
- background-color: rgba(0, 12, 39, 0.1);
1481
- background-blend-mode: hard-light}
1482
- [data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"]{
1483
- background-color: transparent}
1484
- [data-coco][data-component="app-button"][data-theme="secondary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="active"]{
1485
- background-color: rgba(0, 12, 39, 0.1);
1486
- background-blend-mode: hard-light}
1487
- [data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"] .button-icon{
1488
- --tw-text-opacity: 1;
1489
- color: rgb(118 184 170 / var(--tw-text-opacity))}
1490
- [data-coco][data-component="app-button"][data-theme="secondary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-disabled="true"]{
1491
- background-color: transparent;
1492
- opacity: 0.3}
1493
- [data-coco][data-component="app-button"][data-theme="text-secondary"],
1494
- [data-coco][data-component="app-button"][data-theme="text-toolbar"]{
1495
- background-color: transparent;
1496
- --tw-text-opacity: 1;
1497
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1498
- [data-coco][data-component="app-button"][data-theme="text-secondary"]:hover,
1499
- [data-coco][data-component="app-button"][data-theme="text-toolbar"]:hover{
1500
- background-color: rgba(0, 12, 39, 0.06);
1501
- background-blend-mode: hard-light}
1502
- [data-coco][data-component="app-button"][data-theme="text-secondary"]:active,
1503
- [data-coco][data-component="app-button"][data-theme="text-toolbar"]:active{
1504
- background-color: rgba(0, 12, 39, 0.1);
1505
- background-blend-mode: hard-light}
1506
- [data-coco][data-component="app-button"][data-theme="text-secondary"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-state="loading"]{
1507
- background-color: transparent}
1508
- [data-coco][data-component="app-button"][data-theme="text-secondary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-state="active"]{
1509
- background-color: rgba(0, 12, 39, 0.1);
1510
- background-blend-mode: hard-light}
1511
- [data-coco][data-component="app-button"][data-theme="text-secondary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-state="loading"] .button-icon{
1512
- --tw-text-opacity: 1;
1513
- color: rgb(118 184 170 / var(--tw-text-opacity))}
1514
- [data-coco][data-component="app-button"][data-theme="text-secondary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-disabled="true"]{
1515
- background-color: transparent;
1516
- opacity: 0.3}
1517
- [data-coco][data-component="app-button"][data-theme="negative"]{
1518
- --tw-bg-opacity: 1;
1519
- background-color: rgb(220 38 38 / var(--tw-bg-opacity));
1520
- --tw-text-opacity: 1;
1521
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1522
- [data-coco][data-component="app-button"][data-theme="negative"]:hover{
1523
- --tw-bg-opacity: 1;
1524
- background-color: rgb(185 28 28 / var(--tw-bg-opacity))}
1525
- [data-coco][data-component="app-button"][data-theme="negative"]:active{
1526
- --tw-bg-opacity: 1;
1527
- background-color: rgb(153 27 27 / var(--tw-bg-opacity))}
1528
- [data-coco][data-component="app-button"][data-theme="negative"][data-state="loading"]{
1529
- --tw-bg-opacity: 1;
1530
- background-color: rgb(220 38 38 / var(--tw-bg-opacity))}
1531
- [data-coco][data-component="app-button"][data-theme="negative"][data-state="active"]{
1532
- --tw-bg-opacity: 1;
1533
- background-color: rgb(153 27 27 / var(--tw-bg-opacity))}
1534
- [data-coco][data-component="app-button"][data-theme="negative"][data-state="loading"] .button-icon{
1535
- --tw-text-opacity: 1;
1536
- color: rgb(252 165 165 / var(--tw-text-opacity))}
1537
- [data-coco][data-component="app-button"][data-theme="negative"][data-disabled="true"]{
1538
- --tw-bg-opacity: 1;
1539
- background-color: rgb(254 202 202 / var(--tw-bg-opacity))}
1540
- [data-coco][data-component="app-button"][data-theme="text-negative"]{
1541
- background-color: transparent;
1542
- --tw-text-opacity: 1;
1543
- color: rgb(220 38 38 / var(--tw-text-opacity))}
1544
- [data-coco][data-component="app-button"][data-theme="text-negative"]:hover{
1545
- background-color: rgba(0, 12, 39, 0.06);
1546
- background-blend-mode: hard-light}
1547
- [data-coco][data-component="app-button"][data-theme="text-negative"]:active{
1548
- background-color: rgba(0, 12, 39, 0.1);
1549
- background-blend-mode: hard-light}
1550
- [data-coco][data-component="app-button"][data-theme="text-negative"][data-state="loading"]{
1551
- background-color: transparent}
1552
- [data-coco][data-component="app-button"][data-theme="text-negative"][data-state="active"]{
1553
- background-color: rgba(0, 12, 39, 0.1);
1554
- background-blend-mode: hard-light}
1555
- [data-coco][data-component="app-button"][data-theme="text-negative"][data-state="loading"] .button-icon{
1556
- --tw-text-opacity: 1;
1557
- color: rgb(252 165 165 / var(--tw-text-opacity))}
1558
- [data-coco][data-component="app-button"][data-theme="text-negative"][data-disabled="true"]{
1559
- background-color: transparent;
1560
- opacity: 0.3}
1561
- [data-coco][data-component="app-button"][data-theme="warning"]{
1562
- --tw-bg-opacity: 1;
1563
- background-color: rgb(245 158 11 / var(--tw-bg-opacity));
1564
- --tw-text-opacity: 1;
1565
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1566
- [data-coco][data-component="app-button"][data-theme="warning"]:hover{
1567
- --tw-bg-opacity: 1;
1568
- background-color: rgb(180 83 9 / var(--tw-bg-opacity))}
1569
- [data-coco][data-component="app-button"][data-theme="warning"]:active{
1570
- --tw-bg-opacity: 1;
1571
- background-color: rgb(146 64 14 / var(--tw-bg-opacity))}
1572
- [data-coco][data-component="app-button"][data-theme="warning"][data-state="loading"]{
1573
- --tw-bg-opacity: 1;
1574
- background-color: rgb(245 158 11 / var(--tw-bg-opacity))}
1575
- [data-coco][data-component="app-button"][data-theme="warning"][data-state="active"]{
1576
- --tw-bg-opacity: 1;
1577
- background-color: rgb(146 64 14 / var(--tw-bg-opacity))}
1578
- [data-coco][data-component="app-button"][data-theme="warning"][data-state="loading"] .button-icon{
1579
- --tw-text-opacity: 1;
1580
- color: rgb(252 211 77 / var(--tw-text-opacity))}
1581
- [data-coco][data-component="app-button"][data-theme="warning"][data-disabled="true"]{
1582
- --tw-bg-opacity: 1;
1583
- background-color: rgb(253 230 138 / var(--tw-bg-opacity))}
1584
- [data-coco][data-component="app-button"][data-theme="text-warning"]{
1585
- background-color: transparent;
1586
- --tw-text-opacity: 1;
1587
- color: rgb(217 119 6 / var(--tw-text-opacity))}
1588
- [data-coco][data-component="app-button"][data-theme="text-warning"]:hover{
1589
- background-color: rgba(0, 12, 39, 0.06);
1590
- background-blend-mode: hard-light}
1591
- [data-coco][data-component="app-button"][data-theme="text-warning"]:active{
1592
- background-color: rgba(0, 12, 39, 0.1);
1593
- background-blend-mode: hard-light}
1594
- [data-coco][data-component="app-button"][data-theme="text-warning"][data-state="loading"]{
1595
- background-color: transparent}
1596
- [data-coco][data-component="app-button"][data-theme="text-warning"][data-state="active"]{
1597
- background-color: rgba(0, 12, 39, 0.1);
1598
- background-blend-mode: hard-light}
1599
- [data-coco][data-component="app-button"][data-theme="text-warning"][data-state="loading"] .button-icon{
1600
- --tw-text-opacity: 1;
1601
- color: rgb(252 211 77 / var(--tw-text-opacity))}
1602
- [data-coco][data-component="app-button"][data-theme="text-warning"][data-disabled="true"]{
1603
- background-color: transparent;
1604
- opacity: 0.3}
1605
- [data-coco][data-component="app-button"][data-theme="info"]{
1606
- --tw-bg-opacity: 1;
1607
- background-color: rgb(2 132 199 / var(--tw-bg-opacity));
1608
- --tw-text-opacity: 1;
1609
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1610
- [data-coco][data-component="app-button"][data-theme="info"]:hover{
1611
- --tw-bg-opacity: 1;
1612
- background-color: rgb(3 105 161 / var(--tw-bg-opacity))}
1613
- [data-coco][data-component="app-button"][data-theme="info"]:active{
1614
- --tw-bg-opacity: 1;
1615
- background-color: rgb(7 89 133 / var(--tw-bg-opacity))}
1616
- [data-coco][data-component="app-button"][data-theme="info"][data-state="loading"]{
1617
- --tw-bg-opacity: 1;
1618
- background-color: rgb(2 132 199 / var(--tw-bg-opacity))}
1619
- [data-coco][data-component="app-button"][data-theme="info"][data-state="active"]{
1620
- --tw-bg-opacity: 1;
1621
- background-color: rgb(7 89 133 / var(--tw-bg-opacity))}
1622
- [data-coco][data-component="app-button"][data-theme="info"][data-state="loading"] .button-icon{
1623
- --tw-text-opacity: 1;
1624
- color: rgb(125 211 252 / var(--tw-text-opacity))}
1625
- [data-coco][data-component="app-button"][data-theme="info"][data-disabled="true"]{
1626
- --tw-bg-opacity: 1;
1627
- background-color: rgb(186 230 253 / var(--tw-bg-opacity))}
1628
- [data-coco][data-component="app-button"][data-theme="text-info"]{
1629
- background-color: transparent;
1630
- --tw-text-opacity: 1;
1631
- color: rgb(2 132 199 / var(--tw-text-opacity))}
1632
- [data-coco][data-component="app-button"][data-theme="text-info"]:hover{
1633
- background-color: rgba(0, 12, 39, 0.06);
1634
- background-blend-mode: hard-light}
1635
- [data-coco][data-component="app-button"][data-theme="text-info"]:active{
1636
- background-color: rgba(0, 12, 39, 0.1);
1637
- background-blend-mode: hard-light}
1638
- [data-coco][data-component="app-button"][data-theme="text-info"][data-state="loading"]{
1639
- background-color: transparent}
1640
- [data-coco][data-component="app-button"][data-theme="text-info"][data-state="active"]{
1641
- background-color: rgba(0, 12, 39, 0.1);
1642
- background-blend-mode: hard-light}
1643
- [data-coco][data-component="app-button"][data-theme="text-info"][data-state="loading"] .button-icon{
1644
- --tw-text-opacity: 1;
1645
- color: rgb(125 211 252 / var(--tw-text-opacity))}
1646
- [data-coco][data-component="app-button"][data-theme="text-info"][data-disabled="true"]{
1647
- background-color: transparent;
1648
- opacity: 0.3}
1649
- [data-coco][data-component="app-button"][data-theme="neutral-dark"]{
1650
- --tw-bg-opacity: 1;
1651
- background-color: rgb(17 24 39 / var(--tw-bg-opacity));
1652
- --tw-text-opacity: 1;
1653
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1654
- [data-coco][data-component="app-button"][data-theme="neutral-dark"]:hover{
1655
- --tw-bg-opacity: 1;
1656
- background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
1657
- [data-coco][data-component="app-button"][data-theme="neutral-dark"]:active{
1658
- --tw-bg-opacity: 1;
1659
- background-color: rgb(75 85 99 / var(--tw-bg-opacity))}
1660
- [data-coco][data-component="app-button"][data-theme="neutral-dark"][data-state="loading"]{
1661
- --tw-bg-opacity: 1;
1662
- background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1663
- [data-coco][data-component="app-button"][data-theme="neutral-dark"][data-state="active"]{
1664
- --tw-bg-opacity: 1;
1665
- background-color: rgb(75 85 99 / var(--tw-bg-opacity))}
1666
- [data-coco][data-component="app-button"][data-theme="neutral-dark"][data-disabled="true"]{
1667
- --tw-bg-opacity: 1;
1668
- background-color: rgb(209 213 219 / var(--tw-bg-opacity))}
1669
- [data-coco][data-component="app-button"][data-theme="neutral-light"]{
1670
- --tw-bg-opacity: 1;
1671
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1672
- --tw-text-opacity: 1;
1673
- color: rgb(17 24 39 / var(--tw-text-opacity))}
1674
- [data-coco][data-component="app-button"][data-theme="neutral-light"]:hover{
1675
- --tw-bg-opacity: 1;
1676
- background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
1677
- [data-coco][data-component="app-button"][data-theme="neutral-light"]:active{
1678
- --tw-bg-opacity: 1;
1679
- background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
1680
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"]{
1681
- --tw-bg-opacity: 1;
1682
- background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
1683
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"]{
1684
- --tw-bg-opacity: 1;
1685
- background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
1686
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"]{
1687
- --tw-bg-opacity: 1;
1688
- background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
1689
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-inner{
1690
- opacity: 0.4}
1691
- /* Responsive resizing */
1692
- [data-coco][data-component="app-button"][data-size="sm"] .button-content{
1693
- font-size: 14px;
1694
- line-height: 16px}
1695
- [data-coco][data-component="app-button"][data-size="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="sm"] .button-toggle{
1696
- height: 1rem;
1697
- width: 1rem}
1698
- [data-coco][data-component="app-button"][data-size="sm"][data-theme] .button-element{
1699
- padding-top: 0.625rem;
1700
- padding-bottom: 0.625rem;
1701
- padding-left: 1rem;
1702
- padding-right: 1rem}
1703
- [data-coco][data-component="app-button"][data-size="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1704
- margin-left: -0.375rem;
1705
- margin-right: -0.375rem}
1706
- [data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"] .button-element{
1707
- padding-left: 0.5rem;
1708
- padding-right: 0.5rem}
1709
- [data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1710
- padding-left: 0.5rem;
1711
- padding-right: 0.5rem}
1712
- [data-coco][data-component="app-button"][data-size="md"] .button-content{
1713
- font-size: 16px;
1714
- line-height: 20px}
1715
- [data-coco][data-component="app-button"][data-size="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="md"] .button-toggle{
1716
- height: 1.25rem;
1717
- width: 1.25rem}
1718
- [data-coco][data-component="app-button"][data-size="md"][data-theme] .button-element{
1719
- padding-top: 0.75rem;
1720
- padding-bottom: 0.75rem;
1721
- padding-left: 1.25rem;
1722
- padding-right: 1.25rem}
1723
- [data-coco][data-component="app-button"][data-size="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1724
- margin-left: -0.5rem;
1725
- margin-right: -0.5rem}
1726
- [data-coco][data-component="app-button"][data-size="md"][data-theme|="text"] .button-element{
1727
- padding-left: 0.75rem;
1728
- padding-right: 0.75rem}
1729
- [data-coco][data-component="app-button"][data-size="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1730
- padding-left: 0.5rem;
1731
- padding-right: 0.5rem}
1732
- [data-coco][data-component="app-button"][data-size="lg"] .button-content{
1733
- font-size: 18px;
1734
- line-height: 24px}
1735
- [data-coco][data-component="app-button"][data-size="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="lg"] .button-toggle{
1736
- height: 1.5rem;
1737
- width: 1.5rem}
1738
- [data-coco][data-component="app-button"][data-size="lg"][data-theme] .button-element{
1739
- padding-top: 1rem;
1740
- padding-bottom: 1rem;
1741
- padding-left: 1.5rem;
1742
- padding-right: 1.5rem}
1743
- [data-coco][data-component="app-button"][data-size="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="lg"][data-theme][data-collapsed="true"] .button-inner{
1744
- margin-left: -8px;
1745
- margin-right: -8px}
1746
- [data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"] .button-element{
1747
- padding-left: 0.75rem;
1748
- padding-right: 0.75rem}
1749
- [data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1750
- padding-left: 0.75rem;
1751
- padding-right: 0.75rem}
1752
- @media (min-width: 768px) {
1753
- [data-coco][data-component="app-button"][data-size-md="sm"] .button-content{
1754
- font-size: 14px;
1755
- line-height: 16px}
1756
-
1757
- [data-coco][data-component="app-button"][data-size-md="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="sm"] .button-toggle{
1758
- height: 1rem;
1759
- width: 1rem}
1760
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme] .button-element{
1761
- padding-top: 0.625rem;
1762
- padding-bottom: 0.625rem;
1763
- padding-left: 1rem;
1764
- padding-right: 1rem}
1765
-
1766
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1767
- margin-left: -0.375rem;
1768
- margin-right: -0.375rem}
1769
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"] .button-element{
1770
- padding-left: 0.5rem;
1771
- padding-right: 0.5rem}
1772
-
1773
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1774
- padding-left: 0.5rem;
1775
- padding-right: 0.5rem}
1776
- [data-coco][data-component="app-button"][data-size-md="md"] .button-content{
1777
- font-size: 16px;
1778
- line-height: 20px}
1779
-
1780
- [data-coco][data-component="app-button"][data-size-md="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="md"] .button-toggle{
1781
- height: 1.25rem;
1782
- width: 1.25rem}
1783
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme] .button-element{
1784
- padding-top: 0.75rem;
1785
- padding-bottom: 0.75rem;
1786
- padding-left: 1.25rem;
1787
- padding-right: 1.25rem}
1788
-
1789
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1790
- margin-left: -0.5rem;
1791
- margin-right: -0.5rem}
1792
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"] .button-element{
1793
- padding-left: 0.75rem;
1794
- padding-right: 0.75rem}
1795
-
1796
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1797
- padding-left: 0.5rem;
1798
- padding-right: 0.5rem}
1799
- [data-coco][data-component="app-button"][data-size-md="lg"] .button-content{
1800
- font-size: 18px;
1801
- line-height: 24px}
1802
-
1803
- [data-coco][data-component="app-button"][data-size-md="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="lg"] .button-toggle{
1804
- height: 1.5rem;
1805
- width: 1.5rem}
1806
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme] .button-element{
1807
- padding-top: 1rem;
1808
- padding-bottom: 1rem;
1809
- padding-left: 1.5rem;
1810
- padding-right: 1.5rem}
1811
-
1812
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="lg"][data-theme][data-collapsed="true"] .button-inner{
1813
- margin-left: -8px;
1814
- margin-right: -8px}
1815
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"] .button-element{
1816
- padding-left: 0.75rem;
1817
- padding-right: 0.75rem}
1818
-
1819
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1820
- padding-left: 0.75rem;
1821
- padding-right: 0.75rem}
1822
- }
1823
- @media (min-width: 992px) {
1824
- [data-coco][data-component="app-button"][data-size-lg="sm"] .button-content{
1825
- font-size: 14px;
1826
- line-height: 16px}
1827
-
1828
- [data-coco][data-component="app-button"][data-size-lg="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="sm"] .button-toggle{
1829
- height: 1rem;
1830
- width: 1rem}
1831
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme] .button-element{
1832
- padding-top: 0.625rem;
1833
- padding-bottom: 0.625rem;
1834
- padding-left: 1rem;
1835
- padding-right: 1rem}
1836
-
1837
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1838
- margin-left: -0.375rem;
1839
- margin-right: -0.375rem}
1840
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"] .button-element{
1841
- padding-left: 0.5rem;
1842
- padding-right: 0.5rem}
1843
-
1844
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1845
- padding-left: 0.5rem;
1846
- padding-right: 0.5rem}
1847
- [data-coco][data-component="app-button"][data-size-lg="md"] .button-content{
1848
- font-size: 16px;
1849
- line-height: 20px}
1850
-
1851
- [data-coco][data-component="app-button"][data-size-lg="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="md"] .button-toggle{
1852
- height: 1.25rem;
1853
- width: 1.25rem}
1854
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme] .button-element{
1855
- padding-top: 0.75rem;
1856
- padding-bottom: 0.75rem;
1857
- padding-left: 1.25rem;
1858
- padding-right: 1.25rem}
1859
-
1860
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1861
- margin-left: -0.5rem;
1862
- margin-right: -0.5rem}
1863
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"] .button-element{
1864
- padding-left: 0.75rem;
1865
- padding-right: 0.75rem}
1866
-
1867
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1868
- padding-left: 0.5rem;
1869
- padding-right: 0.5rem}
1870
- [data-coco][data-component="app-button"][data-size-lg="lg"] .button-content{
1871
- font-size: 18px;
1872
- line-height: 24px}
1873
-
1874
- [data-coco][data-component="app-button"][data-size-lg="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="lg"] .button-toggle{
1875
- height: 1.5rem;
1876
- width: 1.5rem}
1877
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme] .button-element{
1878
- padding-top: 1rem;
1879
- padding-bottom: 1rem;
1880
- padding-left: 1.5rem;
1881
- padding-right: 1.5rem}
1882
-
1883
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="lg"][data-theme][data-collapsed="true"] .button-inner{
1884
- margin-left: -8px;
1885
- margin-right: -8px}
1886
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"] .button-element{
1887
- padding-left: 0.75rem;
1888
- padding-right: 0.75rem}
1889
-
1890
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1891
- padding-left: 0.75rem;
1892
- padding-right: 0.75rem}
1893
- }
1894
- @media (min-width: 1200px) {
1895
- [data-coco][data-component="app-button"][data-size-xl="sm"] .button-content{
1896
- font-size: 14px;
1897
- line-height: 16px}
1898
-
1899
- [data-coco][data-component="app-button"][data-size-xl="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="sm"] .button-toggle{
1900
- height: 1rem;
1901
- width: 1rem}
1902
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme] .button-element{
1903
- padding-top: 0.625rem;
1904
- padding-bottom: 0.625rem;
1905
- padding-left: 1rem;
1906
- padding-right: 1rem}
1907
-
1908
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1909
- margin-left: -0.375rem;
1910
- margin-right: -0.375rem}
1911
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"] .button-element{
1912
- padding-left: 0.5rem;
1913
- padding-right: 0.5rem}
1914
-
1915
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1916
- padding-left: 0.5rem;
1917
- padding-right: 0.5rem}
1918
- [data-coco][data-component="app-button"][data-size-xl="md"] .button-content{
1919
- font-size: 16px;
1920
- line-height: 20px}
1921
-
1922
- [data-coco][data-component="app-button"][data-size-xl="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="md"] .button-toggle{
1923
- height: 1.25rem;
1924
- width: 1.25rem}
1925
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme] .button-element{
1926
- padding-top: 0.75rem;
1927
- padding-bottom: 0.75rem;
1928
- padding-left: 1.25rem;
1929
- padding-right: 1.25rem}
1930
-
1931
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1932
- margin-left: -0.5rem;
1933
- margin-right: -0.5rem}
1934
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"] .button-element{
1935
- padding-left: 0.75rem;
1936
- padding-right: 0.75rem}
1937
-
1938
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1939
- padding-left: 0.5rem;
1940
- padding-right: 0.5rem}
1941
- [data-coco][data-component="app-button"][data-size-xl="lg"] .button-content{
1942
- font-size: 18px;
1943
- line-height: 24px}
1944
-
1945
- [data-coco][data-component="app-button"][data-size-xl="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="lg"] .button-toggle{
1946
- height: 1.5rem;
1947
- width: 1.5rem}
1948
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme] .button-element{
1949
- padding-top: 1rem;
1950
- padding-bottom: 1rem;
1951
- padding-left: 1.5rem;
1952
- padding-right: 1.5rem}
1953
-
1954
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="lg"][data-theme][data-collapsed="true"] .button-inner{
1955
- margin-left: -8px;
1956
- margin-right: -8px}
1957
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"] .button-element{
1958
- padding-left: 0.75rem;
1959
- padding-right: 0.75rem}
1960
-
1961
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1962
- padding-left: 0.75rem;
1963
- padding-right: 0.75rem}
1964
- }
1965
- @media (min-width: 1400px) {
1966
- [data-coco][data-component="app-button"][data-size-xxl="sm"] .button-content,
1967
- [data-coco][data-component="app-button"][data-size-2xl="sm"] .button-content{
1968
- font-size: 14px;
1969
- line-height: 16px}
1970
-
1971
- [data-coco][data-component="app-button"][data-size-xxl="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xxl="sm"] .button-toggle,
1972
- [data-coco][data-component="app-button"][data-size-2xl="sm"] .button-icon [data-component="icon"],
1973
- [data-coco][data-component="app-button"][data-size-2xl="sm"] .button-toggle{
1974
- height: 1rem;
1975
- width: 1rem}
1976
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme] .button-element,
1977
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme] .button-element{
1978
- padding-top: 0.625rem;
1979
- padding-bottom: 0.625rem;
1980
- padding-left: 1rem;
1981
- padding-right: 1rem}
1982
-
1983
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon,
1984
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme].icon-only > .button-element .button-icon,
1985
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
1986
- margin-left: -0.375rem;
1987
- margin-right: -0.375rem}
1988
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"] .button-element,
1989
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"] .button-element{
1990
- padding-left: 0.5rem;
1991
- padding-right: 0.5rem}
1992
-
1993
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
1994
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"].icon-only > .button-element .button-icon,
1995
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
1996
- padding-left: 0.5rem;
1997
- padding-right: 0.5rem}
1998
- [data-coco][data-component="app-button"][data-size-xxl="md"] .button-content,
1999
- [data-coco][data-component="app-button"][data-size-2xl="md"] .button-content{
2000
- font-size: 16px;
2001
- line-height: 20px}
2002
-
2003
- [data-coco][data-component="app-button"][data-size-xxl="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xxl="md"] .button-toggle,
2004
- [data-coco][data-component="app-button"][data-size-2xl="md"] .button-icon [data-component="icon"],
2005
- [data-coco][data-component="app-button"][data-size-2xl="md"] .button-toggle{
2006
- height: 1.25rem;
2007
- width: 1.25rem}
2008
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme] .button-element,
2009
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme] .button-element{
2010
- padding-top: 0.75rem;
2011
- padding-bottom: 0.75rem;
2012
- padding-left: 1.25rem;
2013
- padding-right: 1.25rem}
2014
-
2015
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="md"][data-theme][data-collapsed="true"] > .button-element .button-icon,
2016
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme].icon-only > .button-element .button-icon,
2017
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2018
- margin-left: -0.5rem;
2019
- margin-right: -0.5rem}
2020
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"] .button-element,
2021
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"] .button-element{
2022
- padding-left: 0.75rem;
2023
- padding-right: 0.75rem}
2024
-
2025
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
2026
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"].icon-only > .button-element .button-icon,
2027
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2028
- padding-left: 0.5rem;
2029
- padding-right: 0.5rem}
2030
- [data-coco][data-component="app-button"][data-size-xxl="lg"] .button-content,
2031
- [data-coco][data-component="app-button"][data-size-2xl="lg"] .button-content{
2032
- font-size: 18px;
2033
- line-height: 24px}
2034
-
2035
- [data-coco][data-component="app-button"][data-size-xxl="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xxl="lg"] .button-toggle,
2036
- [data-coco][data-component="app-button"][data-size-2xl="lg"] .button-icon [data-component="icon"],
2037
- [data-coco][data-component="app-button"][data-size-2xl="lg"] .button-toggle{
2038
- height: 1.5rem;
2039
- width: 1.5rem}
2040
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme] .button-element,
2041
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme] .button-element{
2042
- padding-top: 1rem;
2043
- padding-bottom: 1rem;
2044
- padding-left: 1.5rem;
2045
- padding-right: 1.5rem}
2046
-
2047
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme][data-collapsed="true"] .button-inner,
2048
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme].icon-only > .button-element .button-icon,
2049
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme][data-collapsed="true"] .button-inner{
2050
- margin-left: -8px;
2051
- margin-right: -8px}
2052
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"] .button-element,
2053
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"] .button-element{
2054
- padding-left: 0.75rem;
2055
- padding-right: 0.75rem}
2056
-
2057
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
2058
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"].icon-only > .button-element .button-icon,
2059
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2060
- padding-left: 0.75rem;
2061
- padding-right: 0.75rem}
2062
- }
2063
- @media (min-width: 1800px) {
2064
- [data-coco][data-component="app-button"][data-size-max="sm"] .button-content{
2065
- font-size: 14px;
2066
- line-height: 16px}
2067
-
2068
- [data-coco][data-component="app-button"][data-size-max="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="sm"] .button-toggle{
2069
- height: 1rem;
2070
- width: 1rem}
2071
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme] .button-element{
2072
- padding-top: 0.625rem;
2073
- padding-bottom: 0.625rem;
2074
- padding-left: 1rem;
2075
- padding-right: 1rem}
2076
-
2077
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2078
- margin-left: -0.375rem;
2079
- margin-right: -0.375rem}
2080
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"] .button-element{
2081
- padding-left: 0.5rem;
2082
- padding-right: 0.5rem}
2083
-
2084
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2085
- padding-left: 0.5rem;
2086
- padding-right: 0.5rem}
2087
- [data-coco][data-component="app-button"][data-size-max="md"] .button-content{
2088
- font-size: 16px;
2089
- line-height: 20px}
2090
-
2091
- [data-coco][data-component="app-button"][data-size-max="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="md"] .button-toggle{
2092
- height: 1.25rem;
2093
- width: 1.25rem}
2094
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme] .button-element{
2095
- padding-top: 0.75rem;
2096
- padding-bottom: 0.75rem;
2097
- padding-left: 1.25rem;
2098
- padding-right: 1.25rem}
2099
-
2100
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2101
- margin-left: -0.5rem;
2102
- margin-right: -0.5rem}
2103
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"] .button-element{
2104
- padding-left: 0.75rem;
2105
- padding-right: 0.75rem}
2106
-
2107
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2108
- padding-left: 0.5rem;
2109
- padding-right: 0.5rem}
2110
- [data-coco][data-component="app-button"][data-size-max="lg"] .button-content{
2111
- font-size: 18px;
2112
- line-height: 24px}
2113
-
2114
- [data-coco][data-component="app-button"][data-size-max="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="lg"] .button-toggle{
2115
- height: 1.5rem;
2116
- width: 1.5rem}
2117
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme] .button-element{
2118
- padding-top: 1rem;
2119
- padding-bottom: 1rem;
2120
- padding-left: 1.5rem;
2121
- padding-right: 1.5rem}
2122
-
2123
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="lg"][data-theme][data-collapsed="true"] .button-inner{
2124
- margin-left: -8px;
2125
- margin-right: -8px}
2126
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"] .button-element{
2127
- padding-left: 0.75rem;
2128
- padding-right: 0.75rem}
2129
-
2130
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2131
- padding-left: 0.75rem;
2132
- padding-right: 0.75rem}
2133
- }
2134
- [data-coco][data-component="app-button-group"] {
2135
- width: -moz-fit-content;
2136
- width: fit-content;
2137
- }
2138
- [data-coco][data-component="app-button-group"] .button-group-buttons{
2139
- display: flex;
2140
- align-items: center;
2141
- -moz-column-gap: 0.5rem;
2142
- column-gap: 0.5rem;
2143
- width: -moz-fit-content;
2144
- width: fit-content}
2145
- [data-coco][data-component="app-button-group"] .divider{
2146
- width: 0px;
2147
- align-self: stretch;
2148
- border-left-width: 1px;
2149
- --tw-border-opacity: 1;
2150
- border-color: rgb(209 213 219 / var(--tw-border-opacity))}
2151
- [data-coco][data-component="app-button-group"][data-align="end"] .button-group-buttons{
2152
- margin-left: auto}
2153
- [data-coco][data-component="app-color-picker"]{
2154
- --tw-bg-opacity: 1;
2155
- background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
2156
- [data-coco][data-component="app-color-picker"] .picker-section:not(:first-child){
2157
- border-top-width: 1px;
2158
- border-color: rgba(0, 12, 39, 0.1)}
2159
- [data-coco][data-component="app-color-picker"]:not(.picker-color-wheel-open) .picker-display-section {
2160
- padding-bottom: 0 !important;
2161
- }
2162
- [data-coco][data-component="app-color-picker"] .picker-display-section{
2163
- display: flex;
2164
- align-items: center}
2165
- [data-coco][data-component="app-color-picker"] .picker-display{
2166
- display: flex;
2167
- max-width: 100%;
2168
- align-items: center;
2169
- gap: 0.5rem;
2170
- border-width: 1px;
2171
- --tw-border-opacity: 1;
2172
- border-color: rgb(229 231 235 / var(--tw-border-opacity));
2173
- --tw-bg-opacity: 1;
2174
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2175
- padding-left: 0.5rem;
2176
- padding-right: 0.5rem}
2177
- [data-coco][data-component="app-color-picker"] .picker-display.picker-error{
2178
- --tw-border-opacity: 1;
2179
- border-color: rgb(254 202 202 / var(--tw-border-opacity))}
2180
- [data-coco][data-component="app-color-picker"] .picker-display-color{
2181
- flex: none;
2182
- border-radius: 9999px;
2183
- border-width: 1px;
2184
- border-color: rgba(0, 12, 39, 0.18)}
2185
- [data-coco][data-component="app-color-picker"] .picker-display-input{
2186
- width: 100%;
2187
- border-style: none;
2188
- --tw-bg-opacity: 1;
2189
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2190
- padding: 0px;
2191
- --tw-text-opacity: 1;
2192
- color: rgb(0 0 0 / var(--tw-text-opacity))}
2193
- [data-coco][data-component="app-color-picker"] .picker-display-input:focus{
2194
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2195
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2196
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
2197
- [data-coco][data-component="app-color-picker"] .picker-swatches{
2198
- display: grid;
2199
- grid-auto-rows: auto;
2200
- grid-template-columns: repeat(6, minmax(0, 1fr));
2201
- row-gap: 0.5rem}
2202
- [data-coco][data-component="app-color-picker"] .picker-swatch{
2203
- margin-left: auto;
2204
- margin-right: auto;
2205
- flex: none;
2206
- cursor: pointer;
2207
- border-radius: 9999px;
2208
- border-width: 1px;
2209
- border-color: rgba(0, 12, 39, 0.18)}
2210
- [data-coco][data-component="app-color-picker"] .picker-swatch.swatch-current{
2211
- outline-style: solid;
2212
- outline-width: 1px;
2213
- outline-color: #9CA3AF}
2214
- /* Sizes */
2215
- [data-coco][data-component="app-color-picker"][data-size="sm"]{
2216
- padding: 1.5rem;
2217
- width: 242px}
2218
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-section:not(:first-child){
2219
- padding-top: 1.25rem}
2220
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-section:not(:last-child){
2221
- padding-bottom: 1.25rem}
2222
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-swatch{
2223
- height: 1.5rem;
2224
- width: 1.5rem}
2225
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-swatch.swatch-current{
2226
- outline-offset: 2px}
2227
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-display-section{
2228
- gap: 0.5rem}
2229
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-display-input{
2230
- height: 2.25rem;
2231
- font-size: 14px;
2232
- line-height: 20px}
2233
- [data-coco][data-component="app-color-picker"][data-size="sm"] .picker-display-color{
2234
- height: 1.25rem;
2235
- width: 1.25rem}
2236
- [data-coco][data-component="app-color-picker"][data-size="md"]{
2237
- padding: 2rem;
2238
- width: 304px}
2239
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-section:not(:first-child){
2240
- padding-top: 1.5rem}
2241
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-section:not(:last-child){
2242
- padding-bottom: 1.5rem}
2243
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-swatch{
2244
- margin-left: auto;
2245
- margin-right: auto;
2246
- height: 1.75rem;
2247
- width: 1.75rem}
2248
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-swatch.swatch-current{
2249
- outline-offset: 3}
2250
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-display-section{
2251
- gap: 0.75rem}
2252
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-display-input{
2253
- height: 2.75rem;
2254
- font-size: 16px;
2255
- line-height: 24px}
2256
- [data-coco][data-component="app-color-picker"][data-size="md"] .picker-display-color{
2257
- height: 1.5rem;
2258
- width: 1.5rem}
2259
- @media (min-width: 768px) {
2260
- [data-coco][data-component="app-color-picker"][data-size-md="sm"]{
2261
- padding: 1.5rem;
2262
- width: 242px}
2263
-
2264
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-section:not(:first-child){
2265
- padding-top: 1.25rem}
2266
-
2267
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-section:not(:last-child){
2268
- padding-bottom: 1.25rem}
2269
-
2270
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-swatch{
2271
- height: 1.5rem;
2272
- width: 1.5rem}
2273
-
2274
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-swatch.swatch-current{
2275
- outline-offset: 2px}
2276
-
2277
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-display-section{
2278
- gap: 0.5rem}
2279
-
2280
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-display-input{
2281
- height: 2.25rem;
2282
- font-size: 14px;
2283
- line-height: 20px}
2284
-
2285
- [data-coco][data-component="app-color-picker"][data-size-md="sm"] .picker-display-color{
2286
- height: 1.25rem;
2287
- width: 1.25rem}
2288
-
2289
- [data-coco][data-component="app-color-picker"][data-size-md="md"]{
2290
- padding: 2rem;
2291
- width: 304px}
2292
-
2293
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-section:not(:first-child){
2294
- padding-top: 1.5rem}
2295
-
2296
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-section:not(:last-child){
2297
- padding-bottom: 1.5rem}
2298
-
2299
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-swatch{
2300
- margin-left: auto;
2301
- margin-right: auto;
2302
- height: 1.75rem;
2303
- width: 1.75rem}
2304
-
2305
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-swatch.swatch-current{
2306
- outline-offset: 3}
2307
-
2308
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-display-section{
2309
- gap: 0.75rem}
2310
-
2311
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-display-input{
2312
- height: 2.75rem;
2313
- font-size: 16px;
2314
- line-height: 24px}
2315
-
2316
- [data-coco][data-component="app-color-picker"][data-size-md="md"] .picker-display-color{
2317
- height: 1.5rem;
2318
- width: 1.5rem}
2319
- }
2320
- @media (min-width: 992px) {
2321
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"]{
2322
- padding: 1.5rem;
2323
- width: 242px}
2324
-
2325
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-section:not(:first-child){
2326
- padding-top: 1.25rem}
2327
-
2328
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-section:not(:last-child){
2329
- padding-bottom: 1.25rem}
2330
-
2331
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-swatch{
2332
- height: 1.5rem;
2333
- width: 1.5rem}
2334
-
2335
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-swatch.swatch-current{
2336
- outline-offset: 2px}
2337
-
2338
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-display-section{
2339
- gap: 0.5rem}
2340
-
2341
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-display-input{
2342
- height: 2.25rem;
2343
- font-size: 14px;
2344
- line-height: 20px}
2345
-
2346
- [data-coco][data-component="app-color-picker"][data-size-lg="sm"] .picker-display-color{
2347
- height: 1.25rem;
2348
- width: 1.25rem}
2349
-
2350
- [data-coco][data-component="app-color-picker"][data-size-lg="md"]{
2351
- padding: 2rem;
2352
- width: 304px}
2353
-
2354
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-section:not(:first-child){
2355
- padding-top: 1.5rem}
2356
-
2357
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-section:not(:last-child){
2358
- padding-bottom: 1.5rem}
2359
-
2360
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-swatch{
2361
- margin-left: auto;
2362
- margin-right: auto;
2363
- height: 1.75rem;
2364
- width: 1.75rem}
2365
-
2366
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-swatch.swatch-current{
2367
- outline-offset: 3}
2368
-
2369
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-display-section{
2370
- gap: 0.75rem}
2371
-
2372
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-display-input{
2373
- height: 2.75rem;
2374
- font-size: 16px;
2375
- line-height: 24px}
2376
-
2377
- [data-coco][data-component="app-color-picker"][data-size-lg="md"] .picker-display-color{
2378
- height: 1.5rem;
2379
- width: 1.5rem}
2380
- }
2381
- @media (min-width: 1200px) {
2382
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"]{
2383
- padding: 1.5rem;
2384
- width: 242px}
2385
-
2386
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-section:not(:first-child){
2387
- padding-top: 1.25rem}
2388
-
2389
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-section:not(:last-child){
2390
- padding-bottom: 1.25rem}
2391
-
2392
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-swatch{
2393
- height: 1.5rem;
2394
- width: 1.5rem}
2395
-
2396
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-swatch.swatch-current{
2397
- outline-offset: 2px}
2398
-
2399
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-display-section{
2400
- gap: 0.5rem}
2401
-
2402
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-display-input{
2403
- height: 2.25rem;
2404
- font-size: 14px;
2405
- line-height: 20px}
2406
-
2407
- [data-coco][data-component="app-color-picker"][data-size-xl="sm"] .picker-display-color{
2408
- height: 1.25rem;
2409
- width: 1.25rem}
2410
-
2411
- [data-coco][data-component="app-color-picker"][data-size-xl="md"]{
2412
- padding: 2rem;
2413
- width: 304px}
2414
-
2415
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-section:not(:first-child){
2416
- padding-top: 1.5rem}
2417
-
2418
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-section:not(:last-child){
2419
- padding-bottom: 1.5rem}
2420
-
2421
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-swatch{
2422
- margin-left: auto;
2423
- margin-right: auto;
2424
- height: 1.75rem;
2425
- width: 1.75rem}
2426
-
2427
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-swatch.swatch-current{
2428
- outline-offset: 3}
2429
-
2430
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-display-section{
2431
- gap: 0.75rem}
2432
-
2433
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-display-input{
2434
- height: 2.75rem;
2435
- font-size: 16px;
2436
- line-height: 24px}
2437
-
2438
- [data-coco][data-component="app-color-picker"][data-size-xl="md"] .picker-display-color{
2439
- height: 1.5rem;
2440
- width: 1.5rem}
2441
- }
2442
- [data-coco][data-component="app-color-picker-button"]{
2443
- display: inline-flex;
2444
- width: -moz-max-content;
2445
- width: max-content}
2446
- [data-coco][data-component="app-color-picker-button"] .picker-icon{
2447
- display: block;
2448
- height: 100%;
2449
- width: 100%}
2450
- [data-coco][data-component="app-color-picker-button"] .picker-button-color{
2451
- display: block;
2452
- height: 100%;
2453
- width: 100%;
2454
- border-radius: 9999px;
2455
- border-width: 1px;
2456
- --tw-border-opacity: 1;
2457
- border-color: rgb(17 24 39 / var(--tw-border-opacity));
2458
- --tw-bg-opacity: 1;
2459
- background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
2460
- [data-coco][data-component="app-color-picker-button"] [data-component="app-color-picker"]{
2461
- border-radius: 0.375rem}
2462
- [data-coco][data-component="app-confirm-panel"] {
2463
- width: -moz-min-content;
2464
- width: min-content;
2465
- max-width: 200px;
2466
- }
2467
- [data-coco][data-component="app-confirm-panel"] > :not([hidden]) ~ :not([hidden]){
2468
- --tw-space-y-reverse: 0;
2469
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2470
- margin-bottom: calc(1rem * var(--tw-space-y-reverse))}
2471
- [data-coco][data-component="app-confirm-panel"]{
2472
- padding-left: 1.25rem;
2473
- padding-right: 1.25rem;
2474
- padding-top: 1rem;
2475
- padding-bottom: 1rem;
2476
- text-align: center}
2477
- [data-coco][data-component="app-confirm-panel"] .confirm-text{
2478
- font-size: 14px;
2479
- line-height: 16px;
2480
- font-weight: 600}
2481
- [data-coco][data-component="app-form-button"]{
2482
- display: inline-flex;
2483
- width: -moz-max-content;
2484
- width: max-content}
2485
- [data-coco][data-component="app-form-button"] form{
2486
- width: 100%}
2487
- [data-coco][data-component="app-image-picker"] .picker-blank-state{
2488
- display: flex;
2489
- flex-direction: column;
2490
- align-items: center}
2491
- [data-coco][data-component="app-image-picker"] .picker-placeholder-text{
2492
- margin-bottom: 1.25rem;
2493
- text-align: center}
2494
- [data-coco][data-component="app-image-picker"] .picker-file-name{
2495
- margin-bottom: 1.25rem;
2496
- display: block;
2497
- overflow: hidden;
2498
- text-overflow: ellipsis;
2499
- white-space: nowrap;
2500
- text-align: center;
2501
- font-weight: 600}
2502
- [data-coco][data-component="app-image-picker"] .picker-thumbnail{
2503
- width: 100%}
2504
- [data-coco][data-component="app-image-picker"] .picker-actions{
2505
- display: flex;
2506
- align-items: center;
2507
- justify-content: space-between}
2508
- /* Sizes */
2509
- [data-coco][data-component="app-image-picker"][data-size="sm"]{
2510
- padding: 1.5rem;
2511
- width: 196px}
2512
- [data-coco][data-component="app-image-picker"][data-size="sm"].has-image {
2513
- width: 258px;
2514
- }
2515
- [data-coco][data-component="app-image-picker"][data-size="sm"] .picker-placeholder-text{
2516
- font-size: 14px;
2517
- line-height: 20px;
2518
- width: 148px}
2519
- [data-coco][data-component="app-image-picker"][data-size="sm"] .picker-file-name{
2520
- font-size: 14px;
2521
- line-height: 16px}
2522
- [data-coco][data-component="app-image-picker"][data-size="sm"] .picker-actions{
2523
- padding-top: 1.5rem}
2524
- [data-coco][data-component="app-image-picker"][data-size="md"]{
2525
- padding: 2rem;
2526
- width: 220px}
2527
- [data-coco][data-component="app-image-picker"][data-size="md"].has-image {
2528
- width: 298px;
2529
- }
2530
- [data-coco][data-component="app-image-picker"][data-size="md"] .picker-placeholder-text{
2531
- font-size: 16px;
2532
- line-height: 24px;
2533
- width: 172px}
2534
- [data-coco][data-component="app-image-picker"][data-size="md"] .picker-file-name{
2535
- font-size: 16px;
2536
- line-height: 20px}
2537
- [data-coco][data-component="app-image-picker"][data-size="md"] .picker-actions{
2538
- padding-top: 2rem}
2539
- @media (min-width: 768px) {
2540
- [data-coco][data-component="app-image-picker"][data-size-md="sm"]{
2541
- padding: 1.5rem;
2542
- width: 196px}
2543
-
2544
- [data-coco][data-component="app-image-picker"][data-size-md="sm"].has-image {
2545
- width: 258px;
2546
- }
2547
-
2548
- [data-coco][data-component="app-image-picker"][data-size-md="sm"] .picker-placeholder-text{
2549
- font-size: 14px;
2550
- line-height: 20px;
2551
- width: 148px}
2552
-
2553
- [data-coco][data-component="app-image-picker"][data-size-md="sm"] .picker-file-name{
2554
- font-size: 14px;
2555
- line-height: 16px}
2556
-
2557
- [data-coco][data-component="app-image-picker"][data-size-md="sm"] .picker-actions{
2558
- padding-top: 1.5rem}
2559
-
2560
- [data-coco][data-component="app-image-picker"][data-size-md="md"]{
2561
- padding: 2rem;
2562
- width: 220px}
2563
-
2564
- [data-coco][data-component="app-image-picker"][data-size-md="md"].has-image {
2565
- width: 298px;
2566
- }
2567
-
2568
- [data-coco][data-component="app-image-picker"][data-size-md="md"] .picker-placeholder-text{
2569
- font-size: 16px;
2570
- line-height: 24px;
2571
- width: 172px}
2572
-
2573
- [data-coco][data-component="app-image-picker"][data-size-md="md"] .picker-file-name{
2574
- font-size: 16px;
2575
- line-height: 20px}
2576
-
2577
- [data-coco][data-component="app-image-picker"][data-size-md="md"] .picker-actions{
2578
- padding-top: 2rem}
2579
- }
2580
- @media (min-width: 992px) {
2581
- [data-coco][data-component="app-image-picker"][data-size-lg="sm"]{
2582
- padding: 1.5rem;
2583
- width: 196px}
2584
-
2585
- [data-coco][data-component="app-image-picker"][data-size-lg="sm"].has-image {
2586
- width: 258px;
2587
- }
2588
-
2589
- [data-coco][data-component="app-image-picker"][data-size-lg="sm"] .picker-placeholder-text{
2590
- font-size: 14px;
2591
- line-height: 20px;
2592
- width: 148px}
2593
-
2594
- [data-coco][data-component="app-image-picker"][data-size-lg="sm"] .picker-file-name{
2595
- font-size: 14px;
2596
- line-height: 16px}
2597
-
2598
- [data-coco][data-component="app-image-picker"][data-size-lg="sm"] .picker-actions{
2599
- padding-top: 1.5rem}
2600
-
2601
- [data-coco][data-component="app-image-picker"][data-size-lg="md"]{
2602
- padding: 2rem;
2603
- width: 220px}
2604
-
2605
- [data-coco][data-component="app-image-picker"][data-size-lg="md"].has-image {
2606
- width: 298px;
2607
- }
2608
-
2609
- [data-coco][data-component="app-image-picker"][data-size-lg="md"] .picker-placeholder-text{
2610
- font-size: 16px;
2611
- line-height: 24px;
2612
- width: 172px}
2613
-
2614
- [data-coco][data-component="app-image-picker"][data-size-lg="md"] .picker-file-name{
2615
- font-size: 16px;
2616
- line-height: 20px}
2617
-
2618
- [data-coco][data-component="app-image-picker"][data-size-lg="md"] .picker-actions{
2619
- padding-top: 2rem}
2620
- }
2621
- @media (min-width: 1200px) {
2622
- [data-coco][data-component="app-image-picker"][data-size-xl="sm"]{
2623
- padding: 1.5rem;
2624
- width: 196px}
2625
-
2626
- [data-coco][data-component="app-image-picker"][data-size-xl="sm"].has-image {
2627
- width: 258px;
2628
- }
2629
-
2630
- [data-coco][data-component="app-image-picker"][data-size-xl="sm"] .picker-placeholder-text{
2631
- font-size: 14px;
2632
- line-height: 20px;
2633
- width: 148px}
2634
-
2635
- [data-coco][data-component="app-image-picker"][data-size-xl="sm"] .picker-file-name{
2636
- font-size: 14px;
2637
- line-height: 16px}
2638
-
2639
- [data-coco][data-component="app-image-picker"][data-size-xl="sm"] .picker-actions{
2640
- padding-top: 1.5rem}
2641
-
2642
- [data-coco][data-component="app-image-picker"][data-size-xl="md"]{
2643
- padding: 2rem;
2644
- width: 220px}
2645
-
2646
- [data-coco][data-component="app-image-picker"][data-size-xl="md"].has-image {
2647
- width: 298px;
2648
- }
2649
-
2650
- [data-coco][data-component="app-image-picker"][data-size-xl="md"] .picker-placeholder-text{
2651
- font-size: 16px;
2652
- line-height: 24px;
2653
- width: 172px}
2654
-
2655
- [data-coco][data-component="app-image-picker"][data-size-xl="md"] .picker-file-name{
2656
- font-size: 16px;
2657
- line-height: 20px}
2658
-
2659
- [data-coco][data-component="app-image-picker"][data-size-xl="md"] .picker-actions{
2660
- padding-top: 2rem}
2661
- }
2662
- [data-coco][data-component="app-image-picker-button"]{
2663
- display: inline-flex;
2664
- width: -moz-max-content;
2665
- width: max-content}
2666
- [data-coco][data-component="app-image-picker-button"] [data-component="app-image-picker"]{
2667
- border-radius: 0.375rem}
2668
- [data-coco][data-component="app-image-picker-button"] .picker-file-input{
2669
- display: none}
2670
- [data-coco][data-component="app-link"]{
2671
- text-decoration-line: none}
2672
- [data-coco][data-component="app-link"]:hover{
2673
- text-decoration-line: underline}
2674
- [data-coco][data-component="app-link"][data-theme="primary"]{
2675
- --tw-text-opacity: 1;
2676
- color: rgb(26 136 113 / var(--tw-text-opacity))}
2677
- [data-coco][data-component="app-link"][data-theme="primary"]:active{
2678
- --tw-text-opacity: 1;
2679
- color: rgb(13 97 89 / var(--tw-text-opacity))}
2680
- [data-coco][data-component="app-link"][data-theme="positive"]{
2681
- --tw-text-opacity: 1;
2682
- color: rgb(26 136 113 / var(--tw-text-opacity))}
2683
- [data-coco][data-component="app-link"][data-theme="positive"]:active{
2684
- --tw-text-opacity: 1;
2685
- color: rgb(13 97 89 / var(--tw-text-opacity))}
2686
- [data-coco][data-component="app-link"][data-theme="negative"]{
2687
- --tw-text-opacity: 1;
2688
- color: rgb(220 38 38 / var(--tw-text-opacity))}
2689
- [data-coco][data-component="app-link"][data-theme="negative"]:active{
2690
- --tw-text-opacity: 1;
2691
- color: rgb(153 27 27 / var(--tw-text-opacity))}
2692
- [data-coco][data-component="app-link"][data-theme="warning"]{
2693
- --tw-text-opacity: 1;
2694
- color: rgb(217 119 6 / var(--tw-text-opacity))}
2695
- [data-coco][data-component="app-link"][data-theme="warning"]:active{
2696
- --tw-text-opacity: 1;
2697
- color: rgb(146 64 14 / var(--tw-text-opacity))}
2698
- [data-coco][data-component="app-link"][data-theme="info"]{
2699
- --tw-text-opacity: 1;
2700
- color: rgb(2 132 199 / var(--tw-text-opacity))}
2701
- [data-coco][data-component="app-link"][data-theme="info"]:active{
2702
- --tw-text-opacity: 1;
2703
- color: rgb(7 89 133 / var(--tw-text-opacity))}
2704
- [data-coco][data-component="app-link"][data-theme="neutral-dark"]{
2705
- --tw-text-opacity: 1;
2706
- color: rgb(17 24 39 / var(--tw-text-opacity))}
2707
- [data-coco][data-component="app-link"][data-theme="neutral-light"]{
2708
- --tw-text-opacity: 1;
2709
- color: rgb(255 255 255 / var(--tw-text-opacity))}
2710
- [data-coco][data-component="app-menu"] {
2711
- width: -moz-fit-content;
2712
- width: fit-content;
2713
- }
2714
- [data-coco][data-component="app-menu"] .menu-item > *{
2715
- width: 100%}
2716
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"]:hover,
2717
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"]:hover,
2718
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]:hover{
2719
- background-color: rgba(0, 12, 39, 0.06);
2720
- background-blend-mode: hard-light}
2721
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"]:active,
2722
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"]:active,
2723
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]:active{
2724
- background-color: rgba(0, 12, 39, 0.1);
2725
- background-blend-mode: hard-light}
2726
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-inner{
2727
- margin-left: 0px;
2728
- margin-right: 0px;
2729
- justify-content: flex-start;
2730
- text-align: left}
2731
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-content{
2732
- font-weight: 400 !important}
2733
- [data-coco][data-component="app-menu"][data-size="sm"]{
2734
- padding-top: 0.375rem;
2735
- padding-bottom: 0.375rem}
2736
- [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element{
2737
- padding-left: 1rem;
2738
- padding-right: 1rem;
2739
- padding-top: 0.5rem;
2740
- padding-bottom: 0.5rem;
2741
- font-size: 14px;
2742
- line-height: 16px}
2743
- [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner{
2744
- gap: 0.5rem}
2745
- [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"]{
2746
- height: 1rem;
2747
- width: 1rem}
2748
- [data-coco][data-component="app-menu"][data-size="md"]{
2749
- padding-top: 0.5rem;
2750
- padding-bottom: 0.5rem}
2751
- [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] > .button-element{
2752
- padding-left: 1.25rem;
2753
- padding-right: 1.25rem;
2754
- padding-top: 0.625rem;
2755
- padding-bottom: 0.625rem;
2756
- font-size: 16px;
2757
- line-height: 20px}
2758
- [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] > .button-element .button-inner{
2759
- gap: 0.5rem}
2760
- [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"]{
2761
- height: 1.25rem;
2762
- width: 1.25rem}
2763
- [data-coco][data-component="app-menu"] .divider{
2764
- height: 0px;
2765
- border-top-width: 1px;
2766
- --tw-border-opacity: 1;
2767
- border-color: rgb(209 213 219 / var(--tw-border-opacity))}
2768
- [data-coco][data-component="app-menu-button"]{
2769
- display: inline-flex;
2770
- width: -moz-max-content;
2771
- width: max-content}
2772
- [data-coco][data-component="app-menu-button"][data-fit="full"]{
2773
- width: 100%}
2774
- [data-coco][data-component="app-menu-button"] [data-component="menu"]{
2775
- border-radius: 0.375rem}
2776
- [data-coco][data-component="app-menu-button"] .menu-item:first-child > *{
2777
- border-top-left-radius: 0.375rem;
2778
- border-top-right-radius: 0.375rem}
2779
- [data-coco][data-component="app-menu-button"] .menu-item:last-child > *{
2780
- border-bottom-right-radius: 0.375rem;
2781
- border-bottom-left-radius: 0.375rem}
2782
- [data-coco][data-component="app-notice"]{
2783
- overflow: hidden;
2784
- border-radius: 0.75rem}
2785
- [data-coco][data-component="app-seamless-textarea"]{
2786
- color: currentColor}
2787
- [data-coco][data-component="app-seamless-textarea"] textarea{
2788
- margin: 0px;
2789
- display: block;
2790
- width: 100%;
2791
- border-style: none;
2792
- padding: 0px;
2793
- color: currentColor}
2794
- [data-coco][data-component="app-seamless-textarea"] textarea:focus{
2795
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2796
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2797
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
2798
- [data-coco][data-component="app-seamless-textarea"] textarea {
2799
-
2800
- overflow: hidden;
2801
- resize: none;
2802
- font-size: inherit;
2803
- font-weight: inherit;
2804
- font-style: inherit;
2805
- line-height: inherit;
2806
- background: inherit;
2807
- text-align: inherit;
2808
- overflow-wrap: anywhere;
2809
- }
2810
- [data-coco][data-component="app-seamless-textarea"] textarea::-moz-placeholder{
2811
- color: currentColor;
2812
- opacity: 0.4;
2813
- -moz-transition-property: opacity;
2814
- transition-property: opacity;
2815
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2816
- transition-duration: 150ms}
2817
- [data-coco][data-component="app-seamless-textarea"] textarea::placeholder{
2818
- color: currentColor;
2819
- opacity: 0.4;
2820
- transition-property: opacity;
2821
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2822
- transition-duration: 150ms}
2823
- [data-coco][data-component="app-seamless-textarea"] textarea:hover::-moz-placeholder, [data-coco][data-component="app-seamless-textarea"] textarea:focus::-moz-placeholder{
2824
- opacity: 0.6}
2825
- [data-coco][data-component="app-seamless-textarea"] textarea:hover::placeholder, [data-coco][data-component="app-seamless-textarea"] textarea:focus::placeholder{
2826
- opacity: 0.6}
2827
- [data-coco][data-component="app-snackbar"]{
2828
- width: 100%;
2829
- overflow: hidden;
2830
- border-radius: 0.75rem;
2831
- --tw-bg-opacity: 1;
2832
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
2833
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2834
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
2835
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2836
- max-width: 360px}
2837
- [data-coco][data-component="app-snackbar"] .snackbar-container{
2838
- display: flex;
2839
- align-items: center;
2840
- padding-top: 0.5rem;
2841
- padding-bottom: 0.5rem;
2842
- padding-left: 1rem;
2843
- padding-right: 0.5rem}
2844
- [data-coco][data-component="app-snackbar"] .snackbar-icon{
2845
- margin-right: 0.625rem;
2846
- display: flex;
2847
- flex: none;
2848
- align-items: center;
2849
- --tw-text-opacity: 1;
2850
- color: rgb(255 255 255 / var(--tw-text-opacity))}
2851
- [data-coco][data-component="app-snackbar"] .snackbar-icon .coco-icon{
2852
- height: 1.25rem;
2853
- width: 1.25rem}
2854
- [data-coco][data-component="app-snackbar"] .snackbar-content{
2855
- margin-top: 0.5rem;
2856
- margin-bottom: 0.5rem;
2857
- margin-right: 0.5rem;
2858
- flex-grow: 1;
2859
- font-size: 16px;
2860
- line-height: 20px;
2861
- font-weight: 600;
2862
- --tw-text-opacity: 1;
2863
- color: rgb(255 255 255 / var(--tw-text-opacity))}
2864
- [data-coco][data-component="app-snackbar"] .coco-button .button-element:hover{
2865
- --tw-bg-opacity: 1;
2866
- background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
2867
- [data-coco][data-component="app-snackbar"] .snackbar-action{
2868
- margin-left: auto;
2869
- flex: none}
2870
- [data-coco][data-component="app-snackbar"] .snackbar-action .coco-button .button-element{
2871
- padding-left: 0.5rem;
2872
- padding-right: 0.5rem;
2873
- --tw-text-opacity: 1;
2874
- color: rgb(125 211 252 / var(--tw-text-opacity))}
2875
- [data-coco][data-component="app-snackbar"] .snackbar-dismiss{
2876
- margin-left: auto;
2877
- flex: none}
2878
- [data-coco][data-component="app-snackbar"] .snackbar-dismiss .coco-button .button-element{
2879
- --tw-text-opacity: 1;
2880
- color: rgb(229 231 235 / var(--tw-text-opacity))}
2881
- [data-coco][data-component="app-snackbar"] .snackbar-dismiss .coco-button .button-element:hover{
2882
- --tw-text-opacity: 1;
2883
- color: rgb(255 255 255 / var(--tw-text-opacity))}
2884
- /* Positioning */
2885
- [data-coco][data-component="app-snackbar"][data-position="static"]{
2886
- position: static}
2887
- [data-coco][data-component="app-snackbar"][data-position="fixed"]{
2888
- position: fixed;
2889
- bottom: 2rem;
2890
- left: 50%;
2891
- --tw-translate-x: -50%;
2892
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2893
- z-index: 1000}
2894
- /* Themes */
2895
- [data-coco][data-component="app-snackbar"][data-theme="positive"] .snackbar-icon{
2896
- --tw-text-opacity: 1;
2897
- color: rgb(118 184 170 / var(--tw-text-opacity))}
2898
- [data-coco][data-component="app-snackbar"][data-theme="warning"] .snackbar-icon{
2899
- --tw-text-opacity: 1;
2900
- color: rgb(252 211 77 / var(--tw-text-opacity))}
2901
- [data-coco][data-component="app-snackbar"][data-theme="negative"] .snackbar-icon{
2902
- --tw-text-opacity: 1;
2903
- color: rgb(252 165 165 / var(--tw-text-opacity))}
2904
- [data-coco][data-component="app-snackbar"][data-theme="pending"] .snackbar-icon{
2905
- --tw-text-opacity: 1;
2906
- color: rgb(125 211 252 / var(--tw-text-opacity))}
2907
- /* Transitions */
2908
- [data-coco][data-component="app-snackbar"].snackbar-enter{
2909
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2910
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2911
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2912
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2913
- transition-duration: 150ms;
2914
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1)}
2915
- [data-coco][data-component="app-snackbar"].snackbar-enter-start{
2916
- --tw-scale-x: .9;
2917
- --tw-scale-y: .9;
2918
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2919
- opacity: 0}
2920
- [data-coco][data-component="app-snackbar"].snackbar-enter-end{
2921
- --tw-scale-x: 1;
2922
- --tw-scale-y: 1;
2923
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2924
- opacity: 1}
2925
- [data-coco][data-component="app-snackbar"].snackbar-leave{
2926
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2927
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2928
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2929
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2930
- transition-duration: 150ms;
2931
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1)}
2932
- [data-coco][data-component="app-snackbar"].snackbar-leave-start{
2933
- --tw-scale-x: 1;
2934
- --tw-scale-y: 1;
2935
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2936
- opacity: 1}
2937
- [data-coco][data-component="app-snackbar"].snackbar-leave-end{
2938
- --tw-scale-x: .9;
2939
- --tw-scale-y: .9;
2940
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2941
- opacity: 0}
2942
- [data-coco][data-component="app-system-banner"] {
2943
- }
2944
- [data-coco][data-component="app-toast"]{
2945
- width: 100%;
2946
- overflow: hidden;
2947
- border-radius: 0.75rem;
2948
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2949
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
2950
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2951
- max-width: 360px}
2952
- /* Positioning */
2953
- [data-coco][data-component="app-toast"][data-position="static"]{
2954
- position: static}
2955
- [data-coco][data-component="app-toast"][data-position="fixed"]{
2956
- position: fixed;
2957
- top: 2rem;
2958
- right: 2rem;
2959
- z-index: 1000}
2960
- /* Transitions */
2961
- [data-coco][data-component="app-toast"].toast-enter{
2962
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2963
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2964
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2965
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2966
- transition-duration: 150ms;
2967
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1)}
2968
- [data-coco][data-component="app-toast"].toast-enter-start{
2969
- --tw-scale-x: .9;
2970
- --tw-scale-y: .9;
2971
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2972
- opacity: 0}
2973
- [data-coco][data-component="app-toast"].toast-enter-end{
2974
- --tw-scale-x: 1;
2975
- --tw-scale-y: 1;
2976
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2977
- opacity: 1}
2978
- [data-coco][data-component="app-toast"].toast-leave{
2979
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2980
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2981
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2982
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2983
- transition-duration: 300ms;
2984
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1)}
2985
- [data-coco][data-component="app-toast"].toast-leave-start{
2986
- --tw-scale-x: 1;
2987
- --tw-scale-y: 1;
2988
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2989
- opacity: 1}
2990
- [data-coco][data-component="app-toast"].toast-leave-end{
2991
- --tw-scale-x: .9;
2992
- --tw-scale-y: .9;
2993
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2994
- opacity: 0}
2995
- [data-coco][data-component="app-toolbar"] .toolbar-sections{
2996
- display: flex;
2997
- align-items: center;
2998
- -moz-column-gap: 0.5rem;
2999
- column-gap: 0.5rem}
3000
- [data-coco][data-component="app-toolbar"] .toolbar-section{
3001
- display: flex;
3002
- min-width: 1%;
3003
- flex-grow: 1}
3004
- [data-coco][data-component="app-toolbar"] .toolbar-section-start{
3005
- justify-content: flex-start}
3006
- [data-coco][data-component="app-toolbar"] .toolbar-section-end{
3007
- justify-content: flex-end}
3008
- [data-coco][data-component="app-application-layout"]{
3009
- display: grid;
3010
- height: 100vh;
3011
- width: 100vw;
3012
- grid-template-rows: min-content 1fr;
3013
- overflow: hidden}
3014
- [data-coco][data-component="app-application-layout"] .app-main{
3015
- overflow: auto}
3016
- [data-coco][data-component="book-editable-slide"] {
3017
- /*
3018
- * x-padding at max (1480px): 240px / 16.2%
3019
- * x-padding at min (320px): 16.2% x 320px = 52px
3020
- */
3021
- --x-padding: max(38px, clamp(52px, 16.2cqw, 240px));
3022
-
3023
- /*
3024
- * y-padding at max (1480px): 80px / 5.4%
3025
- * y-padding at min (320px): 5.4% x 320px = 17px
3026
- */
3027
- --y-padding: max(38px, clamp(17px, 5.4cqw, 80px));
3028
-
3029
- /*
3030
- * Title font size at max (1480px): 80px / 5.4%
3031
- * Title font size at min (320px): 5.4% x 320px = 17px
3032
- * Text font size at reflow (700px): 35px
3033
- */
3034
- --title-font-size: max(
3035
- 35px,
3036
- clamp(17px, 5.4cqw, 80px)
3037
- );
3038
-
3039
- /*
3040
- * Text font size at max (1480px): 32px / 2.16%
3041
- * Text font size at min (320px): 2.16% x 320px = 7px
3042
- * Text font size at reflow (700px): 14px
3043
- */
3044
- --text-font-size: max(
3045
- 15px,
3046
- clamp(7px, 2.16cqw, 32px)
3047
- );
3048
-
3049
- /* ------------- */
3050
-
3051
- position: relative;
3052
-
3053
- border-radius: 0.375rem;
3054
-
3055
- --tw-bg-opacity: 1;
3056
-
3057
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3058
-
3059
- container-type: inline-size;
3060
- min-width: 320px;
3061
- }
3062
- [data-coco][data-component="book-editable-slide"] .slide-aspect{
3063
- display: grid;
3064
- min-height: 62.5cqw;
3065
- grid-template-columns: repeat(1, minmax(0, 1fr));
3066
- grid-template-rows: repeat(1, minmax(0, 1fr))}
3067
- @container (min-width: 700px){
3068
-
3069
- @supports (aspect-ratio: 1 / 1){
3070
-
3071
- [data-coco][data-component="book-editable-slide"] .slide-aspect{
3072
- aspect-ratio: 16 / 10}}
3073
-
3074
- @supports not (aspect-ratio: 1 / 1){
3075
-
3076
- [data-coco][data-component="book-editable-slide"] .slide-aspect::before{
3077
- content: "";
3078
- float: left;
3079
- padding-top: calc(100% / (16 / 10))}
3080
-
3081
- [data-coco][data-component="book-editable-slide"] .slide-aspect::after{
3082
- clear: left;
3083
- content: "";
3084
- display: block}}
3085
-
3086
- [data-coco][data-component="book-editable-slide"] .slide-container{
3087
- position: absolute;
3088
- inset: 0px}}
3089
- [data-coco][data-component="book-editable-slide"] .slide-container{
3090
- display: flex;
3091
- flex-direction: column;
3092
- align-items: center;
3093
- justify-content: center;
3094
- overflow: hidden;
3095
- background-size: cover;
3096
- background-position: center;
3097
- text-align: center}
3098
- [data-coco][data-component="book-editable-slide"] [data-slide-region],
3099
- [data-coco][data-component="book-editable-slide"] .slide-text,
3100
- [data-coco][data-component="book-editable-slide"] .slide-media{
3101
- display: none}
3102
- [data-coco][data-component="book-editable-slide"] .slide-group{
3103
- display: contents}
3104
- /* layouts */
3105
- [data-coco][data-component="book-editable-slide"][data-layout="basic"]{
3106
- background-size: cover;
3107
- background-repeat: no-repeat;
3108
- text-align: center}
3109
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] [data-slide-region="content-1"]{
3110
- display: block}
3111
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] [data-slide-region="content-1"] .slide-text{
3112
- display: block}
3113
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-container{
3114
- overflow: hidden;
3115
- padding-left: 2rem;
3116
- padding-right: 2rem;
3117
- padding-top: var(--y-padding);
3118
- padding-bottom: var(--y-padding)}
3119
- @container (min-width: 700px){
3120
-
3121
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-container{
3122
- padding-left: var(--x-padding);
3123
- padding-right: var(--x-padding)}}
3124
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-header{
3125
- width: 100%;
3126
- margin-bottom: 0.3em;
3127
- line-height: 1.1;
3128
- font-size: var(--title-font-size)}
3129
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-content{
3130
- width: 100%;
3131
- flex: none}
3132
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-header,
3133
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-content{
3134
- margin-left: auto;
3135
- margin-right: auto;
3136
- width: 100%;
3137
- max-width: 360px}
3138
- @container (min-width: 700px){
3139
-
3140
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-header,
3141
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-content{
3142
- max-width: 100%}}
3143
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-title{
3144
- font-weight: 700;
3145
- color: currentColor;
3146
- overflow-wrap: anywhere;
3147
- line-height: 1.1}
3148
- [data-coco][data-component="book-editable-slide"][data-layout="basic"] .slide-text{
3149
- color: currentColor;
3150
- line-height: 1.4;
3151
- font-size: var(--text-font-size)}
3152
- [data-coco][data-component="book-media-slide"] img{
3153
- width: 100%;
3154
- border-radius: 0.375rem}
3155
- .static{
3156
- position: static}
3157
- .fixed{
3158
- position: fixed}
3159
- .block{
3160
- display: block}
3161
- .flex{
3162
- display: flex}
3163
- .contents{
3164
- display: contents}
3165
- .hidden{
3166
- display: none}
3167
- .resize{
3168
- resize: both}
3169
- .italic{
3170
- font-style: italic}
3171
- .\!text-red-500{
3172
- --tw-text-opacity: 1 !important;
3173
- color: rgb(239 68 68 / var(--tw-text-opacity)) !important}
3174
- .text-amber-500{
3175
- --tw-text-opacity: 1;
3176
- color: rgb(245 158 11 / var(--tw-text-opacity))}
3177
- .text-red-500{
3178
- --tw-text-opacity: 1;
3179
- color: rgb(239 68 68 / var(--tw-text-opacity))}
3180
- .text-teal-500{
3181
- --tw-text-opacity: 1;
3182
- color: rgb(20 184 166 / var(--tw-text-opacity))}
3183
- .filter{
3184
- 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)}
3185
- /* Transparent gray blend-mode background utilities */
3186
- .\!icon{
3187
- color: currentColor}
3188
- .icon{
3189
- color: currentColor}
3190
- .\!icon {
3191
- stroke-linecap: round !important;
3192
- stroke-linejoin: round !important;
3193
- }
3194
- .icon {
3195
- stroke-linecap: round;
3196
- stroke-linejoin: round;
3197
- }
3198
- .tippy-dropdown-box{
3199
- border-radius: 0.5rem;
3200
- border-width: 1px;
3201
- border-style: solid;
3202
- --tw-bg-opacity: 1;
3203
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
3204
- font-size: 14px;
3205
- line-height: 16px;
3206
- --tw-text-opacity: 1;
3207
- color: rgb(17 24 39 / var(--tw-text-opacity));
3208
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
3209
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
3210
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3211
- border-color: rgba(0, 12, 39, 0.1)}
3212
- .app-alert-stacked .alert-title {
3213
- matgin-top: -1px;
3214
- margin-bottom: 2px;
3215
- }
3216
- .app-alert-stacked .alert-actions{
3217
- margin-top: 0.5rem}
3218
- .app-alert-stacked[data-dismissable="true"] .alert-container{
3219
- padding-right: 3rem}
3220
- .app-alert-stacked[data-dismissable="true"] .alert-dismiss{
3221
- position: absolute;
3222
- top: 0.5rem;
3223
- right: 0.5rem;
3224
- margin-left: auto}
3225
- .app-alert-multi-line .alert-container{
3226
- align-items: center}
3227
- .app-alert-multi-line .alert-icon{
3228
- align-self: center}
3229
- .app-alert-multi-line .alert-body{
3230
- display: flex;
3231
- width: 100%;
3232
- align-items: center}
3233
- .app-alert-multi-line .alert-content{
3234
- margin-right: 1rem}
3235
- .app-alert-multi-line .alert-title {
3236
- margin-bottom: 0;
3237
- }
3238
- .app-alert-multi-line .alert-actions{
3239
- margin-top: 0px;
3240
- margin-left: auto}
3241
- .app-alert-multi-line[data-dismissable="true"] .alert-container{
3242
- padding-right: 0.75rem}
3243
- .app-alert-multi-line[data-dismissable="true"] .alert-dismiss{
3244
- position: relative;
3245
- top: auto;
3246
- right: auto;
3247
- display: flex;
3248
- flex-direction: column}
3249
- .app-alert-single-line .alert-content{
3250
- display: flex;
3251
- width: 100%;
3252
- align-items: center}
3253
- .app-alert-single-line .alert-content > :not([hidden]) ~ :not([hidden]){
3254
- --tw-space-x-reverse: 0;
3255
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3256
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
3257
- .app-alert-single-line .alert-title{
3258
- white-space: nowrap}
3259
- .app-alert-single-line .alert-link{
3260
- display: none}
3261
- .app-button-sm .button-content{
3262
- font-size: 14px;
3263
- line-height: 16px}
3264
- .app-button-sm .button-icon [data-component="icon"],
3265
- .app-button-sm .button-toggle{
3266
- height: 1rem;
3267
- width: 1rem}
3268
- .app-button-sm[data-theme] .button-element{
3269
- padding-top: 0.625rem;
3270
- padding-bottom: 0.625rem;
3271
- padding-left: 1rem;
3272
- padding-right: 1rem}
3273
- .app-button-sm[data-theme].icon-only > .button-element .button-icon,
3274
- .app-button-sm[data-theme][data-collapsed="true"] > .button-element .button-icon{
3275
- margin-left: -0.375rem;
3276
- margin-right: -0.375rem}
3277
- .app-button-sm[data-theme|="text"] .button-element{
3278
- padding-left: 0.5rem;
3279
- padding-right: 0.5rem}
3280
- .app-button-sm[data-theme|="text"].icon-only > .button-element .button-icon,
3281
- .app-button-sm[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3282
- padding-left: 0.5rem;
3283
- padding-right: 0.5rem}
3284
- .app-button-md .button-content{
3285
- font-size: 16px;
3286
- line-height: 20px}
3287
- .app-button-md .button-icon [data-component="icon"],
3288
- .app-button-md .button-toggle{
3289
- height: 1.25rem;
3290
- width: 1.25rem}
3291
- .app-button-md[data-theme] .button-element{
3292
- padding-top: 0.75rem;
3293
- padding-bottom: 0.75rem;
3294
- padding-left: 1.25rem;
3295
- padding-right: 1.25rem}
3296
- .app-button-md[data-theme].icon-only > .button-element .button-icon,
3297
- .app-button-md[data-theme][data-collapsed="true"] > .button-element .button-icon{
3298
- margin-left: -0.5rem;
3299
- margin-right: -0.5rem}
3300
- .app-button-md[data-theme|="text"] .button-element{
3301
- padding-left: 0.75rem;
3302
- padding-right: 0.75rem}
3303
- .app-button-md[data-theme|="text"].icon-only > .button-element .button-icon,
3304
- .app-button-md[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3305
- padding-left: 0.5rem;
3306
- padding-right: 0.5rem}
3307
- .app-button-lg .button-content{
3308
- font-size: 18px;
3309
- line-height: 24px}
3310
- .app-button-lg .button-icon [data-component="icon"],
3311
- .app-button-lg .button-toggle{
3312
- height: 1.5rem;
3313
- width: 1.5rem}
3314
- .app-button-lg[data-theme] .button-element{
3315
- padding-top: 1rem;
3316
- padding-bottom: 1rem;
3317
- padding-left: 1.5rem;
3318
- padding-right: 1.5rem}
3319
- .app-button-lg[data-theme].icon-only > .button-element .button-icon,
3320
- .app-button-lg[data-theme][data-collapsed="true"] .button-inner{
3321
- margin-left: -8px;
3322
- margin-right: -8px}
3323
- .app-button-lg[data-theme|="text"] .button-element{
3324
- padding-left: 0.75rem;
3325
- padding-right: 0.75rem}
3326
- .app-button-lg[data-theme|="text"].icon-only > .button-element .button-icon,
3327
- .app-button-lg[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3328
- padding-left: 0.75rem;
3329
- padding-right: 0.75rem}
3330
- .app-color-picker-sm .picker-section:not(:first-child){
3331
- padding-top: 1.25rem}
3332
- .app-color-picker-sm .picker-section:not(:last-child){
3333
- padding-bottom: 1.25rem}
3334
- .app-color-picker-sm .picker-swatch{
3335
- height: 1.5rem;
3336
- width: 1.5rem}
3337
- .app-color-picker-sm .picker-swatch.swatch-current{
3338
- outline-offset: 2px}
3339
- .app-color-picker-sm .picker-display-section{
3340
- gap: 0.5rem}
3341
- .app-color-picker-sm .picker-display-input{
3342
- height: 2.25rem;
3343
- font-size: 14px;
3344
- line-height: 20px}
3345
- .app-color-picker-sm .picker-display-color{
3346
- height: 1.25rem;
3347
- width: 1.25rem}
3348
- .app-color-picker-md .picker-section:not(:first-child){
3349
- padding-top: 1.5rem}
3350
- .app-color-picker-md .picker-section:not(:last-child){
3351
- padding-bottom: 1.5rem}
3352
- .app-color-picker-md .picker-swatch{
3353
- margin-left: auto;
3354
- margin-right: auto;
3355
- height: 1.75rem;
3356
- width: 1.75rem}
3357
- .app-color-picker-md .picker-swatch.swatch-current{
3358
- outline-offset: 3}
3359
- .app-color-picker-md .picker-display-section{
3360
- gap: 0.75rem}
3361
- .app-color-picker-md .picker-display-input{
3362
- height: 2.75rem;
3363
- font-size: 16px;
3364
- line-height: 24px}
3365
- .app-color-picker-md .picker-display-color{
3366
- height: 1.5rem;
3367
- width: 1.5rem}
3368
- .app-image-picker-sm.has-image {
3369
- width: 258px;
3370
- }
3371
- .app-image-picker-sm .picker-placeholder-text{
3372
- font-size: 14px;
3373
- line-height: 20px;
3374
- width: 148px}
3375
- .app-image-picker-sm .picker-file-name{
3376
- font-size: 14px;
3377
- line-height: 16px}
3378
- .app-image-picker-sm .picker-actions{
3379
- padding-top: 1.5rem}
3380
- .app-image-picker-md.has-image {
3381
- width: 298px;
3382
- }
3383
- .app-image-picker-md .picker-placeholder-text{
3384
- font-size: 16px;
3385
- line-height: 24px;
3386
- width: 172px}
3387
- .app-image-picker-md .picker-file-name{
3388
- font-size: 16px;
3389
- line-height: 20px}
3390
- .app-image-picker-md .picker-actions{
3391
- padding-top: 2rem}
3392
- .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
3393
- [data-tippy-root]{max-width:calc(100vw - 10px)}
3394
- .tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
3395
- .tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
3396
- .tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}
3397
- .tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
3398
- .tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}
3399
- .tippy-box[data-placement^=left]>.tippy-arrow{right:0}
3400
- .tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}
3401
- .tippy-box[data-placement^=right]>.tippy-arrow{left:0}
3402
- .tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}
3403
- .tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
3404
- .tippy-arrow{width:16px;height:16px;color:#333}
3405
- .tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
3406
- .tippy-content{position:relative;padding:5px 9px;z-index:1}
3407
- .tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}
3408
- .tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}
3409
- .tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}
3410
- .tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}
3411
- .tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}
3412
- .tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}
3413
- .tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}
3414
- .tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}
3415
- .tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}
3416
- .tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
3417
- .tippy-box{border:1px transparent}
3418
- .tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}
3419
- .tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}
3420
- .tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}
3421
- .tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}
3422
- .tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}
3423
- .tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}
3424
- .tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}
3425
- .tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}
3426
- .tippy-arrow{border-color:inherit}
3427
- .tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}