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