@cirthcss/cirth 0.3.0 → 0.5.0

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