@cirthcss/cirth 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/README.md +117 -15
  2. package/dist/cirth.classless.css +2123 -1861
  3. package/dist/cirth.classless.jade.css +2123 -1861
  4. package/dist/cirth.classless.jade.min.css +1 -1
  5. package/dist/cirth.classless.min.css +1 -1
  6. package/dist/cirth.classless.scoped.css +1302 -1157
  7. package/dist/cirth.classless.scoped.jade.css +1302 -1157
  8. package/dist/cirth.classless.scoped.jade.min.css +1 -1
  9. package/dist/cirth.classless.scoped.min.css +1 -1
  10. package/dist/cirth.classless.scoped.slate.css +1302 -1157
  11. package/dist/cirth.classless.scoped.slate.min.css +1 -1
  12. package/dist/cirth.classless.slate.css +2123 -1861
  13. package/dist/cirth.classless.slate.min.css +1 -1
  14. package/dist/cirth.css +2088 -1804
  15. package/dist/cirth.jade.css +2088 -1804
  16. package/dist/cirth.jade.min.css +1 -1
  17. package/dist/cirth.min.css +1 -1
  18. package/dist/cirth.scoped.css +1569 -1402
  19. package/dist/cirth.scoped.jade.css +1569 -1402
  20. package/dist/cirth.scoped.jade.min.css +1 -1
  21. package/dist/cirth.scoped.min.css +1 -1
  22. package/dist/cirth.scoped.slate.css +1569 -1402
  23. package/dist/cirth.scoped.slate.min.css +1 -1
  24. package/dist/cirth.slate.css +2088 -1804
  25. package/dist/cirth.slate.min.css +1 -1
  26. package/package.json +26 -4
  27. package/dist/cirth.amber.css +0 -3747
  28. package/dist/cirth.amber.min.css +0 -1
  29. package/dist/cirth.blue.css +0 -3747
  30. package/dist/cirth.blue.min.css +0 -1
  31. package/dist/cirth.classless.amber.css +0 -3245
  32. package/dist/cirth.classless.amber.min.css +0 -1
  33. package/dist/cirth.classless.blue.css +0 -3245
  34. package/dist/cirth.classless.blue.min.css +0 -1
  35. package/dist/cirth.classless.cyan.css +0 -3245
  36. package/dist/cirth.classless.cyan.min.css +0 -1
  37. package/dist/cirth.classless.fuchsia.css +0 -3245
  38. package/dist/cirth.classless.fuchsia.min.css +0 -1
  39. package/dist/cirth.classless.green.css +0 -3245
  40. package/dist/cirth.classless.green.min.css +0 -1
  41. package/dist/cirth.classless.grey.css +0 -3245
  42. package/dist/cirth.classless.grey.min.css +0 -1
  43. package/dist/cirth.classless.indigo.css +0 -3245
  44. package/dist/cirth.classless.indigo.min.css +0 -1
  45. package/dist/cirth.classless.lime.css +0 -3245
  46. package/dist/cirth.classless.lime.min.css +0 -1
  47. package/dist/cirth.classless.orange.css +0 -3245
  48. package/dist/cirth.classless.orange.min.css +0 -1
  49. package/dist/cirth.classless.pink.css +0 -3245
  50. package/dist/cirth.classless.pink.min.css +0 -1
  51. package/dist/cirth.classless.pumpkin.css +0 -3245
  52. package/dist/cirth.classless.pumpkin.min.css +0 -1
  53. package/dist/cirth.classless.purple.css +0 -3245
  54. package/dist/cirth.classless.purple.min.css +0 -1
  55. package/dist/cirth.classless.red.css +0 -3245
  56. package/dist/cirth.classless.red.min.css +0 -1
  57. package/dist/cirth.classless.sand.css +0 -3245
  58. package/dist/cirth.classless.sand.min.css +0 -1
  59. package/dist/cirth.classless.scoped.amber.css +0 -2959
  60. package/dist/cirth.classless.scoped.amber.min.css +0 -1
  61. package/dist/cirth.classless.scoped.blue.css +0 -2959
  62. package/dist/cirth.classless.scoped.blue.min.css +0 -1
  63. package/dist/cirth.classless.scoped.cyan.css +0 -2959
  64. package/dist/cirth.classless.scoped.cyan.min.css +0 -1
  65. package/dist/cirth.classless.scoped.fuchsia.css +0 -2959
  66. package/dist/cirth.classless.scoped.fuchsia.min.css +0 -1
  67. package/dist/cirth.classless.scoped.green.css +0 -2959
  68. package/dist/cirth.classless.scoped.green.min.css +0 -1
  69. package/dist/cirth.classless.scoped.grey.css +0 -2959
  70. package/dist/cirth.classless.scoped.grey.min.css +0 -1
  71. package/dist/cirth.classless.scoped.indigo.css +0 -2959
  72. package/dist/cirth.classless.scoped.indigo.min.css +0 -1
  73. package/dist/cirth.classless.scoped.lime.css +0 -2959
  74. package/dist/cirth.classless.scoped.lime.min.css +0 -1
  75. package/dist/cirth.classless.scoped.orange.css +0 -2959
  76. package/dist/cirth.classless.scoped.orange.min.css +0 -1
  77. package/dist/cirth.classless.scoped.pink.css +0 -2959
  78. package/dist/cirth.classless.scoped.pink.min.css +0 -1
  79. package/dist/cirth.classless.scoped.pumpkin.css +0 -2959
  80. package/dist/cirth.classless.scoped.pumpkin.min.css +0 -1
  81. package/dist/cirth.classless.scoped.purple.css +0 -2959
  82. package/dist/cirth.classless.scoped.purple.min.css +0 -1
  83. package/dist/cirth.classless.scoped.red.css +0 -2959
  84. package/dist/cirth.classless.scoped.red.min.css +0 -1
  85. package/dist/cirth.classless.scoped.sand.css +0 -2959
  86. package/dist/cirth.classless.scoped.sand.min.css +0 -1
  87. package/dist/cirth.classless.scoped.violet.css +0 -2959
  88. package/dist/cirth.classless.scoped.violet.min.css +0 -1
  89. package/dist/cirth.classless.scoped.yellow.css +0 -2959
  90. package/dist/cirth.classless.scoped.yellow.min.css +0 -1
  91. package/dist/cirth.classless.scoped.zinc.css +0 -2959
  92. package/dist/cirth.classless.scoped.zinc.min.css +0 -1
  93. package/dist/cirth.classless.violet.css +0 -3245
  94. package/dist/cirth.classless.violet.min.css +0 -1
  95. package/dist/cirth.classless.yellow.css +0 -3245
  96. package/dist/cirth.classless.yellow.min.css +0 -1
  97. package/dist/cirth.classless.zinc.css +0 -3245
  98. package/dist/cirth.classless.zinc.min.css +0 -1
  99. package/dist/cirth.cyan.css +0 -3747
  100. package/dist/cirth.cyan.min.css +0 -1
  101. package/dist/cirth.fuchsia.css +0 -3747
  102. package/dist/cirth.fuchsia.min.css +0 -1
  103. package/dist/cirth.green.css +0 -3747
  104. package/dist/cirth.green.min.css +0 -1
  105. package/dist/cirth.grey.css +0 -3747
  106. package/dist/cirth.grey.min.css +0 -1
  107. package/dist/cirth.indigo.css +0 -3747
  108. package/dist/cirth.indigo.min.css +0 -1
  109. package/dist/cirth.lime.css +0 -3747
  110. package/dist/cirth.lime.min.css +0 -1
  111. package/dist/cirth.orange.css +0 -3747
  112. package/dist/cirth.orange.min.css +0 -1
  113. package/dist/cirth.pink.css +0 -3747
  114. package/dist/cirth.pink.min.css +0 -1
  115. package/dist/cirth.pumpkin.css +0 -3747
  116. package/dist/cirth.pumpkin.min.css +0 -1
  117. package/dist/cirth.purple.css +0 -3747
  118. package/dist/cirth.purple.min.css +0 -1
  119. package/dist/cirth.red.css +0 -3747
  120. package/dist/cirth.red.min.css +0 -1
  121. package/dist/cirth.sand.css +0 -3747
  122. package/dist/cirth.sand.min.css +0 -1
  123. package/dist/cirth.scoped.amber.css +0 -3467
  124. package/dist/cirth.scoped.amber.min.css +0 -1
  125. package/dist/cirth.scoped.blue.css +0 -3467
  126. package/dist/cirth.scoped.blue.min.css +0 -1
  127. package/dist/cirth.scoped.cyan.css +0 -3467
  128. package/dist/cirth.scoped.cyan.min.css +0 -1
  129. package/dist/cirth.scoped.fuchsia.css +0 -3467
  130. package/dist/cirth.scoped.fuchsia.min.css +0 -1
  131. package/dist/cirth.scoped.green.css +0 -3467
  132. package/dist/cirth.scoped.green.min.css +0 -1
  133. package/dist/cirth.scoped.grey.css +0 -3467
  134. package/dist/cirth.scoped.grey.min.css +0 -1
  135. package/dist/cirth.scoped.indigo.css +0 -3467
  136. package/dist/cirth.scoped.indigo.min.css +0 -1
  137. package/dist/cirth.scoped.lime.css +0 -3467
  138. package/dist/cirth.scoped.lime.min.css +0 -1
  139. package/dist/cirth.scoped.orange.css +0 -3467
  140. package/dist/cirth.scoped.orange.min.css +0 -1
  141. package/dist/cirth.scoped.pink.css +0 -3467
  142. package/dist/cirth.scoped.pink.min.css +0 -1
  143. package/dist/cirth.scoped.pumpkin.css +0 -3467
  144. package/dist/cirth.scoped.pumpkin.min.css +0 -1
  145. package/dist/cirth.scoped.purple.css +0 -3467
  146. package/dist/cirth.scoped.purple.min.css +0 -1
  147. package/dist/cirth.scoped.red.css +0 -3467
  148. package/dist/cirth.scoped.red.min.css +0 -1
  149. package/dist/cirth.scoped.sand.css +0 -3467
  150. package/dist/cirth.scoped.sand.min.css +0 -1
  151. package/dist/cirth.scoped.violet.css +0 -3467
  152. package/dist/cirth.scoped.violet.min.css +0 -1
  153. package/dist/cirth.scoped.yellow.css +0 -3467
  154. package/dist/cirth.scoped.yellow.min.css +0 -1
  155. package/dist/cirth.scoped.zinc.css +0 -3467
  156. package/dist/cirth.scoped.zinc.min.css +0 -1
  157. package/dist/cirth.violet.css +0 -3747
  158. package/dist/cirth.violet.min.css +0 -1
  159. package/dist/cirth.yellow.css +0 -3747
  160. package/dist/cirth.yellow.min.css +0 -1
  161. package/dist/cirth.zinc.css +0 -3747
  162. package/dist/cirth.zinc.min.css +0 -1
@@ -1,781 +1,248 @@
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
+
1
12
  .cirth {
2
- --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3
- --cirth-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
4
- --cirth-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--cirth-font-family-emoji);
5
- --cirth-font-family: var(--cirth-font-family-sans-serif);
6
- --cirth-line-height: 1.5;
7
- --cirth-font-weight: 400;
8
- --cirth-font-size: 100%;
9
- --cirth-text-underline-offset: .1rem;
10
- --cirth-border-radius: .25rem;
11
- --cirth-border-width: .0625rem;
12
- --cirth-outline-width: .125rem;
13
- --cirth-transition: .2s ease-in-out;
14
- --cirth-spacing: 1rem;
15
- --cirth-typography-spacing-vertical: 1rem;
16
- --cirth-block-spacing-vertical: var(--cirth-spacing);
17
- --cirth-block-spacing-horizontal: var(--cirth-spacing);
18
- --cirth-form-element-spacing-vertical: .75rem;
19
- --cirth-form-element-spacing-horizontal: 1rem;
20
- --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
21
- --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
22
- --cirth-group-box-shadow-focus-with-input: 0 0 0 .0625rem var(--cirth-form-element-border-color);
23
- --cirth-modal-overlay-backdrop-filter: blur(.375rem);
24
- --cirth-nav-element-spacing-vertical: 1rem;
25
- --cirth-nav-element-spacing-horizontal: .5rem;
26
- --cirth-nav-link-spacing-vertical: .5rem;
27
- --cirth-nav-link-spacing-horizontal: .5rem;
28
- --cirth-nav-breadcrumb-divider: ">";
29
- --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");
30
- --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");
31
- --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");
32
- --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");
33
- --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");
34
- --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");
35
- --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");
36
- --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");
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
+ width: 100%;
37
+ padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
38
+ margin-left: auto;
39
+ margin-right: auto;
37
40
  }
38
41
 
39
42
  @media (width >= 576px) {
40
- .cirth {
41
- --cirth-font-size: 106.25%;
43
+ .cirth > header, .cirth > main, .cirth > footer {
44
+ max-width: 510px;
45
+ padding-left: 0;
46
+ padding-right: 0;
42
47
  }
43
48
  }
44
49
 
45
50
  @media (width >= 768px) {
46
- .cirth {
47
- --cirth-font-size: 112.5%;
51
+ .cirth > header, .cirth > main, .cirth > footer {
52
+ max-width: 700px;
48
53
  }
49
54
  }
50
55
 
51
56
  @media (width >= 1024px) {
52
- .cirth {
53
- --cirth-font-size: 118.75%;
57
+ .cirth > header, .cirth > main, .cirth > footer {
58
+ max-width: 950px;
54
59
  }
55
60
  }
56
61
 
57
62
  @media (width >= 1280px) {
58
- .cirth {
59
- --cirth-font-size: 125%;
63
+ .cirth > header, .cirth > main, .cirth > footer {
64
+ max-width: 1200px;
60
65
  }
61
66
  }
62
67
 
63
68
  @media (width >= 1536px) {
64
- .cirth {
65
- --cirth-font-size: 131.25%;
69
+ .cirth > header, .cirth > main, .cirth > footer {
70
+ max-width: 1450px;
66
71
  }
67
72
  }
68
73
 
69
- .cirth a {
70
- --cirth-text-decoration: underline;
74
+ .cirth section {
75
+ margin-bottom: var(--cirth-block-spacing-vertical);
71
76
  }
72
77
 
73
- .cirth small {
74
- --cirth-font-size: .875em;
78
+ .cirth b, .cirth strong {
79
+ font-weight: bolder;
80
+ }
81
+
82
+ .cirth sub, .cirth sup {
83
+ vertical-align: baseline;
84
+ font-size: .75em;
85
+ line-height: 0;
86
+ position: relative;
87
+ }
88
+
89
+ .cirth sub {
90
+ bottom: -.25em;
91
+ }
92
+
93
+ .cirth sup {
94
+ top: -.5em;
95
+ }
96
+
97
+ .cirth address, .cirth blockquote, .cirth dl, .cirth ol, .cirth p, .cirth pre, .cirth table, .cirth ul {
98
+ margin-top: 0;
99
+ margin-bottom: var(--cirth-typography-spacing-vertical);
100
+ color: var(--cirth-color);
101
+ font-style: normal;
102
+ font-weight: var(--cirth-font-weight);
75
103
  }
76
104
 
77
105
  .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
78
- --cirth-font-weight: 700;
106
+ margin-top: 0;
107
+ margin-bottom: var(--cirth-typography-spacing-vertical);
108
+ color: var(--cirth-color);
109
+ font-weight: var(--cirth-font-weight);
110
+ font-size: var(--cirth-font-size);
111
+ line-height: var(--cirth-line-height);
112
+ font-family: var(--cirth-font-family);
79
113
  }
80
114
 
81
115
  .cirth h1 {
82
- --cirth-font-size: 2rem;
83
- --cirth-line-height: 1.125;
84
- --cirth-typography-spacing-top: 3rem;
116
+ --cirth-color: var(--cirth-h1-color);
85
117
  }
86
118
 
87
119
  .cirth h2 {
88
- --cirth-font-size: 1.75rem;
89
- --cirth-line-height: 1.15;
90
- --cirth-typography-spacing-top: 2.625rem;
120
+ --cirth-color: var(--cirth-h2-color);
91
121
  }
92
122
 
93
123
  .cirth h3 {
94
- --cirth-font-size: 1.5rem;
95
- --cirth-line-height: 1.175;
96
- --cirth-typography-spacing-top: 2.25rem;
124
+ --cirth-color: var(--cirth-h3-color);
97
125
  }
98
126
 
99
127
  .cirth h4 {
100
- --cirth-font-size: 1.25rem;
101
- --cirth-line-height: 1.2;
102
- --cirth-typography-spacing-top: 1.874rem;
128
+ --cirth-color: var(--cirth-h4-color);
103
129
  }
104
130
 
105
131
  .cirth h5 {
106
- --cirth-font-size: 1.125rem;
107
- --cirth-line-height: 1.225;
108
- --cirth-typography-spacing-top: 1.6875rem;
132
+ --cirth-color: var(--cirth-h5-color);
109
133
  }
110
134
 
111
135
  .cirth h6 {
112
- --cirth-font-size: 1rem;
113
- --cirth-line-height: 1.25;
114
- --cirth-typography-spacing-top: 1.5rem;
136
+ --cirth-color: var(--cirth-h6-color);
115
137
  }
116
138
 
117
- .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
118
- --cirth-font-weight: 600;
119
- --cirth-border-width: .1875rem;
139
+ .cirth :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
140
+ margin-top: var(--cirth-typography-spacing-top);
120
141
  }
121
142
 
122
- .cirth pre, .cirth code, .cirth kbd, .cirth samp {
123
- --cirth-font-family: var(--cirth-font-family-monospace);
143
+ .cirth p, .cirth hgroup {
144
+ margin-bottom: var(--cirth-typography-spacing-vertical);
124
145
  }
125
146
 
126
- .cirth kbd {
127
- --cirth-font-weight: bolder;
147
+ .cirth hgroup > * {
148
+ margin-top: 0;
149
+ margin-bottom: 0;
128
150
  }
129
151
 
130
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
131
- --cirth-outline-width: .0625rem;
152
+ .cirth hgroup > :not(:first-child):last-child {
153
+ --cirth-color: var(--cirth-muted-color);
154
+ --cirth-font-weight: unset;
155
+ font-size: var(--cirth-font-size-md);
132
156
  }
133
157
 
134
- .cirth :where(select, textarea) {
135
- --cirth-outline-width: .0625rem;
158
+ .cirth :where(ol, ul) li {
159
+ margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
136
160
  }
137
161
 
138
- .cirth [type="search"] {
139
- --cirth-border-radius: 5rem;
162
+ .cirth :where(dl, ol, ul) :where(dl, ol, ul) {
163
+ margin: 0;
164
+ margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
140
165
  }
141
166
 
142
- .cirth [type="checkbox"] {
143
- --cirth-border-width: .125rem;
167
+ .cirth ul li {
168
+ list-style: square;
144
169
  }
145
170
 
146
- .cirth [type="radio"] {
147
- --cirth-border-width: .125rem;
171
+ .cirth mark {
172
+ background-color: var(--cirth-mark-background-color);
173
+ color: var(--cirth-mark-color);
174
+ vertical-align: baseline;
175
+ padding: .125rem .25rem;
148
176
  }
149
177
 
150
- .cirth [type="checkbox"][role="switch"] {
151
- --cirth-border-width: .1875rem;
178
+ .cirth blockquote {
179
+ margin: var(--cirth-typography-spacing-vertical) 0;
180
+ padding: var(--cirth-spacing);
181
+ border-right: none;
182
+ border-left: var(--cirth-border-width-4) solid var(--cirth-blockquote-border-color);
183
+ border-inline-start: var(--cirth-border-width-4) solid var(--cirth-blockquote-border-color);
184
+ border-inline-end: none;
185
+ display: block;
152
186
  }
153
187
 
154
- .cirth [role="search"] {
155
- --cirth-border-radius: 5rem;
188
+ .cirth blockquote footer {
189
+ margin-top: calc(var(--cirth-typography-spacing-vertical) * .5);
190
+ color: var(--cirth-blockquote-footer-color);
156
191
  }
157
192
 
158
- .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
159
- --cirth-form-element-spacing-horizontal: 2rem;
193
+ .cirth abbr[title] {
194
+ border-bottom: var(--cirth-border-width-1) dotted;
195
+ cursor: help;
196
+ text-decoration: none;
160
197
  }
161
198
 
162
- .cirth [role="search"] [type="submit"] {
163
- --cirth-form-element-spacing-horizontal: 2rem;
199
+ .cirth ins {
200
+ color: var(--cirth-ins-color);
201
+ text-decoration: none;
164
202
  }
165
203
 
166
- .cirth [role="search"] [type="button"] {
167
- --cirth-form-element-spacing-horizontal: 2rem;
204
+ .cirth del {
205
+ color: var(--cirth-del-color);
168
206
  }
169
207
 
170
- .cirth [role="group"] [type="submit"] {
171
- --cirth-form-element-spacing-horizontal: 2rem;
208
+ .cirth ::selection {
209
+ background-color: var(--cirth-text-selection-color);
172
210
  }
173
211
 
174
- .cirth [role="group"] [type="button"] {
175
- --cirth-form-element-spacing-horizontal: 2rem;
212
+ .cirth [role="link"] {
213
+ --cirth-color: var(--cirth-primary);
214
+ --cirth-background-color: transparent;
215
+ --cirth-underline: var(--cirth-primary-underline);
216
+ background-color: var(--cirth-background-color);
217
+ color: var(--cirth-color);
218
+ -webkit-text-decoration: var(--cirth-text-decoration);
219
+ text-decoration: var(--cirth-text-decoration);
220
+ -webkit-text-decoration-color: var(--cirth-underline);
221
+ text-decoration-color: var(--cirth-underline);
222
+ text-underline-offset: .125em;
223
+ transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
224
+ outline: none;
176
225
  }
177
226
 
178
- .cirth details summary[role="button"]:after {
179
- filter: brightness(0) invert();
227
+ .cirth :where(a:not([role="button"])) {
228
+ --cirth-color: var(--cirth-primary);
229
+ --cirth-background-color: transparent;
230
+ --cirth-underline: var(--cirth-primary-underline);
231
+ background-color: var(--cirth-background-color);
232
+ color: var(--cirth-color);
233
+ -webkit-text-decoration: var(--cirth-text-decoration);
234
+ text-decoration: var(--cirth-text-decoration);
235
+ -webkit-text-decoration-color: var(--cirth-underline);
236
+ text-decoration-color: var(--cirth-underline);
237
+ text-underline-offset: .125em;
238
+ transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
239
+ outline: none;
180
240
  }
181
241
 
182
- .cirth [aria-busy="true"]:not(:is(input, select, textarea)):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):before {
183
- filter: brightness(0) invert();
184
- }
185
-
186
- .cirth[data-theme="light"], .cirth [data-theme="light"], .cirth:not([data-theme="dark"]) {
187
- --lightningcss-light: initial;
188
- --lightningcss-dark: ;
189
- color-scheme: light;
190
- --cirth-background-color: #fff;
191
- --cirth-color: #373c44;
192
- --cirth-text-selection-color: rgba(2, 154, 232, .25);
193
- --cirth-muted-color: #646b79;
194
- --cirth-muted-border-color: #e7eaf0;
195
- --cirth-primary: #0172ad;
196
- --cirth-primary-background: #0172ad;
197
- --cirth-primary-border: var(--cirth-primary-background);
198
- --cirth-primary-underline: rgba(1, 114, 173, .5);
199
- --cirth-primary-hover: #015887;
200
- --cirth-primary-hover-background: #02659a;
201
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
202
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
203
- --cirth-primary-focus: rgba(2, 154, 232, .5);
204
- --cirth-primary-inverse: #fff;
205
- --cirth-secondary: #5d6b89;
206
- --cirth-secondary-background: #525f7a;
207
- --cirth-secondary-border: var(--cirth-secondary-background);
208
- --cirth-secondary-underline: rgba(93, 107, 137, .5);
209
- --cirth-secondary-hover: #48536b;
210
- --cirth-secondary-hover-background: #48536b;
211
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
212
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
213
- --cirth-secondary-focus: rgba(93, 107, 137, .25);
214
- --cirth-secondary-inverse: #fff;
215
- --cirth-contrast: #181c25;
216
- --cirth-contrast-background: #181c25;
217
- --cirth-contrast-border: var(--cirth-contrast-background);
218
- --cirth-contrast-underline: rgba(24, 28, 37, .5);
219
- --cirth-contrast-hover: #000;
220
- --cirth-contrast-hover-background: #000;
221
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
222
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
223
- --cirth-contrast-focus: rgba(93, 107, 137, .25);
224
- --cirth-contrast-inverse: #fff;
225
- --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);
226
- --cirth-h1-color: #2d3138;
227
- --cirth-h2-color: #373c44;
228
- --cirth-h3-color: #424751;
229
- --cirth-h4-color: #4d535e;
230
- --cirth-h5-color: #5c6370;
231
- --cirth-h6-color: #646b79;
232
- --cirth-mark-background-color: #fde7c0;
233
- --cirth-mark-color: #0f1114;
234
- --cirth-ins-color: #1d6a54;
235
- --cirth-del-color: #883935;
236
- --cirth-blockquote-border-color: var(--cirth-muted-border-color);
237
- --cirth-blockquote-footer-color: var(--cirth-muted-color);
238
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
239
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
240
- --cirth-table-border-color: var(--cirth-muted-border-color);
241
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
242
- --cirth-code-background-color: #f3f5f7;
243
- --cirth-code-color: #646b79;
244
- --cirth-code-kbd-background-color: var(--cirth-color);
245
- --cirth-code-kbd-color: var(--cirth-background-color);
246
- --cirth-form-element-background-color: #fbfcfc;
247
- --cirth-form-element-selected-background-color: #dfe3eb;
248
- --cirth-form-element-border-color: #cfd5e2;
249
- --cirth-form-element-color: #23262c;
250
- --cirth-form-element-placeholder-color: var(--cirth-muted-color);
251
- --cirth-form-element-active-background-color: #fff;
252
- --cirth-form-element-active-border-color: var(--cirth-primary-border);
253
- --cirth-form-element-focus-color: var(--cirth-primary-border);
254
- --cirth-form-element-disabled-opacity: .5;
255
- --cirth-form-element-invalid-border-color: #b86a6b;
256
- --cirth-form-element-invalid-active-border-color: #c84f48;
257
- --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
258
- --cirth-form-element-valid-border-color: #4c9b8a;
259
- --cirth-form-element-valid-active-border-color: #279977;
260
- --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
261
- --cirth-switch-background-color: #bfc7d9;
262
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
263
- --cirth-switch-color: #fff;
264
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
265
- --cirth-range-border-color: #dfe3eb;
266
- --cirth-range-active-border-color: #bfc7d9;
267
- --cirth-range-thumb-border-color: var(--cirth-background-color);
268
- --cirth-range-thumb-color: var(--cirth-secondary-background);
269
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
270
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
271
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
272
- --cirth-accordion-close-summary-color: var(--cirth-color);
273
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
274
- --cirth-card-background-color: var(--cirth-background-color);
275
- --cirth-card-border-color: var(--cirth-muted-border-color);
276
- --cirth-card-box-shadow: var(--cirth-box-shadow);
277
- --cirth-card-sectioning-background-color: #fbfcfc;
278
- --cirth-loading-spinner-opacity: .5;
279
- --cirth-modal-overlay-background-color: rgba(232, 234, 237, .75);
280
- --cirth-progress-background-color: #dfe3eb;
281
- --cirth-progress-color: var(--cirth-primary-background);
282
- --cirth-tooltip-background-color: var(--cirth-contrast-background);
283
- --cirth-tooltip-color: var(--cirth-contrast-inverse);
284
- --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");
285
- --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");
286
- }
287
-
288
- .cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
289
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
290
- }
291
-
292
- .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
293
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
294
- }
295
-
296
- .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
297
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
298
- }
299
-
300
- @media only screen and (prefers-color-scheme: dark) {
301
- .cirth:not([data-theme]) {
302
- --lightningcss-light: ;
303
- --lightningcss-dark: initial;
304
- color-scheme: dark;
305
- --cirth-background-color: #13171f;
306
- --cirth-color: #c2c7d0;
307
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
308
- --cirth-muted-color: #7b8495;
309
- --cirth-muted-border-color: #202632;
310
- --cirth-primary: #01aaff;
311
- --cirth-primary-background: #0172ad;
312
- --cirth-primary-border: var(--cirth-primary-background);
313
- --cirth-primary-underline: rgba(1, 170, 255, .5);
314
- --cirth-primary-hover: #79c0ff;
315
- --cirth-primary-hover-background: #017fc0;
316
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
317
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
318
- --cirth-primary-focus: rgba(1, 170, 255, .376);
319
- --cirth-primary-inverse: #fff;
320
- --cirth-secondary: #969eaf;
321
- --cirth-secondary-background: #525f7a;
322
- --cirth-secondary-border: var(--cirth-secondary-background);
323
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
324
- --cirth-secondary-hover: #b3b9c5;
325
- --cirth-secondary-hover-background: #5d6b89;
326
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
327
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
328
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
329
- --cirth-secondary-inverse: #fff;
330
- --cirth-contrast: #dfe3eb;
331
- --cirth-contrast-background: #eff1f4;
332
- --cirth-contrast-border: var(--cirth-contrast-background);
333
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
334
- --cirth-contrast-hover: #fff;
335
- --cirth-contrast-hover-background: #fff;
336
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
337
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
338
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
339
- --cirth-contrast-inverse: #000;
340
- --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);
341
- --cirth-h1-color: #f0f1f3;
342
- --cirth-h2-color: #e0e3e7;
343
- --cirth-h3-color: #c2c7d0;
344
- --cirth-h4-color: #b3b9c5;
345
- --cirth-h5-color: #a4acba;
346
- --cirth-h6-color: #8891a4;
347
- --cirth-mark-background-color: #014063;
348
- --cirth-mark-color: #fff;
349
- --cirth-ins-color: #62af9a;
350
- --cirth-del-color: #ce7e7b;
351
- --cirth-blockquote-border-color: var(--cirth-muted-border-color);
352
- --cirth-blockquote-footer-color: var(--cirth-muted-color);
353
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
354
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
355
- --cirth-table-border-color: var(--cirth-muted-border-color);
356
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
357
- --cirth-code-background-color: #1a1f28;
358
- --cirth-code-color: #8891a4;
359
- --cirth-code-kbd-background-color: var(--cirth-color);
360
- --cirth-code-kbd-color: var(--cirth-background-color);
361
- --cirth-form-element-background-color: #1c212c;
362
- --cirth-form-element-selected-background-color: #2a3140;
363
- --cirth-form-element-border-color: #2a3140;
364
- --cirth-form-element-color: #e0e3e7;
365
- --cirth-form-element-placeholder-color: #8891a4;
366
- --cirth-form-element-active-background-color: #1a1f28;
367
- --cirth-form-element-active-border-color: var(--cirth-primary-border);
368
- --cirth-form-element-focus-color: var(--cirth-primary-border);
369
- --cirth-form-element-disabled-opacity: .5;
370
- --cirth-form-element-invalid-border-color: #964a50;
371
- --cirth-form-element-invalid-active-border-color: #b7403b;
372
- --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
373
- --cirth-form-element-valid-border-color: #2a7b6f;
374
- --cirth-form-element-valid-active-border-color: #16896a;
375
- --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
376
- --cirth-switch-background-color: #333c4e;
377
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
378
- --cirth-switch-color: #fff;
379
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
380
- --cirth-range-border-color: #202632;
381
- --cirth-range-active-border-color: #2a3140;
382
- --cirth-range-thumb-border-color: var(--cirth-background-color);
383
- --cirth-range-thumb-color: var(--cirth-secondary-background);
384
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
385
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
386
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
387
- --cirth-accordion-close-summary-color: var(--cirth-color);
388
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
389
- --cirth-card-background-color: #181c25;
390
- --cirth-card-border-color: var(--cirth-card-background-color);
391
- --cirth-card-box-shadow: var(--cirth-box-shadow);
392
- --cirth-card-sectioning-background-color: #1a1f28;
393
- --cirth-loading-spinner-opacity: .5;
394
- --cirth-modal-overlay-background-color: rgba(8, 9, 10, .75);
395
- --cirth-progress-background-color: #202632;
396
- --cirth-progress-color: var(--cirth-primary-background);
397
- --cirth-tooltip-background-color: var(--cirth-contrast-background);
398
- --cirth-tooltip-color: var(--cirth-contrast-inverse);
399
- --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");
400
- --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");
401
- }
402
-
403
- .cirth:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
404
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
405
- }
406
- }
407
-
408
- .cirth[data-theme="dark"], .cirth [data-theme="dark"] {
409
- --lightningcss-light: ;
410
- --lightningcss-dark: initial;
411
- color-scheme: dark;
412
- --cirth-background-color: #13171f;
413
- --cirth-color: #c2c7d0;
414
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
415
- --cirth-muted-color: #7b8495;
416
- --cirth-muted-border-color: #202632;
417
- --cirth-primary: #01aaff;
418
- --cirth-primary-background: #0172ad;
419
- --cirth-primary-border: var(--cirth-primary-background);
420
- --cirth-primary-underline: rgba(1, 170, 255, .5);
421
- --cirth-primary-hover: #79c0ff;
422
- --cirth-primary-hover-background: #017fc0;
423
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
424
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
425
- --cirth-primary-focus: rgba(1, 170, 255, .376);
426
- --cirth-primary-inverse: #fff;
427
- --cirth-secondary: #969eaf;
428
- --cirth-secondary-background: #525f7a;
429
- --cirth-secondary-border: var(--cirth-secondary-background);
430
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
431
- --cirth-secondary-hover: #b3b9c5;
432
- --cirth-secondary-hover-background: #5d6b89;
433
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
434
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
435
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
436
- --cirth-secondary-inverse: #fff;
437
- --cirth-contrast: #dfe3eb;
438
- --cirth-contrast-background: #eff1f4;
439
- --cirth-contrast-border: var(--cirth-contrast-background);
440
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
441
- --cirth-contrast-hover: #fff;
442
- --cirth-contrast-hover-background: #fff;
443
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
444
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
445
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
446
- --cirth-contrast-inverse: #000;
447
- --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);
448
- --cirth-h1-color: #f0f1f3;
449
- --cirth-h2-color: #e0e3e7;
450
- --cirth-h3-color: #c2c7d0;
451
- --cirth-h4-color: #b3b9c5;
452
- --cirth-h5-color: #a4acba;
453
- --cirth-h6-color: #8891a4;
454
- --cirth-mark-background-color: #014063;
455
- --cirth-mark-color: #fff;
456
- --cirth-ins-color: #62af9a;
457
- --cirth-del-color: #ce7e7b;
458
- --cirth-blockquote-border-color: var(--cirth-muted-border-color);
459
- --cirth-blockquote-footer-color: var(--cirth-muted-color);
460
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
461
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
462
- --cirth-table-border-color: var(--cirth-muted-border-color);
463
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
464
- --cirth-code-background-color: #1a1f28;
465
- --cirth-code-color: #8891a4;
466
- --cirth-code-kbd-background-color: var(--cirth-color);
467
- --cirth-code-kbd-color: var(--cirth-background-color);
468
- --cirth-form-element-background-color: #1c212c;
469
- --cirth-form-element-selected-background-color: #2a3140;
470
- --cirth-form-element-border-color: #2a3140;
471
- --cirth-form-element-color: #e0e3e7;
472
- --cirth-form-element-placeholder-color: #8891a4;
473
- --cirth-form-element-active-background-color: #1a1f28;
474
- --cirth-form-element-active-border-color: var(--cirth-primary-border);
475
- --cirth-form-element-focus-color: var(--cirth-primary-border);
476
- --cirth-form-element-disabled-opacity: .5;
477
- --cirth-form-element-invalid-border-color: #964a50;
478
- --cirth-form-element-invalid-active-border-color: #b7403b;
479
- --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
480
- --cirth-form-element-valid-border-color: #2a7b6f;
481
- --cirth-form-element-valid-active-border-color: #16896a;
482
- --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
483
- --cirth-switch-background-color: #333c4e;
484
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
485
- --cirth-switch-color: #fff;
486
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
487
- --cirth-range-border-color: #202632;
488
- --cirth-range-active-border-color: #2a3140;
489
- --cirth-range-thumb-border-color: var(--cirth-background-color);
490
- --cirth-range-thumb-color: var(--cirth-secondary-background);
491
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
492
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
493
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
494
- --cirth-accordion-close-summary-color: var(--cirth-color);
495
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
496
- --cirth-card-background-color: #181c25;
497
- --cirth-card-border-color: var(--cirth-card-background-color);
498
- --cirth-card-box-shadow: var(--cirth-box-shadow);
499
- --cirth-card-sectioning-background-color: #1a1f28;
500
- --cirth-loading-spinner-opacity: .5;
501
- --cirth-modal-overlay-background-color: rgba(8, 9, 10, .75);
502
- --cirth-progress-background-color: #202632;
503
- --cirth-progress-color: var(--cirth-primary-background);
504
- --cirth-tooltip-background-color: var(--cirth-contrast-background);
505
- --cirth-tooltip-color: var(--cirth-contrast-inverse);
506
- --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");
507
- --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");
508
- }
509
-
510
- .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
511
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
512
- }
513
-
514
- .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
515
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
516
- }
517
-
518
- .cirth progress {
519
- accent-color: var(--cirth-primary);
520
- }
521
-
522
- .cirth [type="checkbox"] {
523
- accent-color: var(--cirth-primary);
524
- }
525
-
526
- .cirth [type="radio"] {
527
- accent-color: var(--cirth-primary);
528
- }
529
-
530
- .cirth [type="range"] {
531
- accent-color: var(--cirth-primary);
532
- }
533
-
534
- .cirth, .cirth *, .cirth :before, .cirth :after {
535
- box-sizing: border-box;
536
- background-repeat: no-repeat;
537
- }
538
-
539
- .cirth:before, .cirth:after, .cirth :before, .cirth :after {
540
- -webkit-text-decoration: inherit;
541
- text-decoration: inherit;
542
- vertical-align: inherit;
543
- }
544
-
545
- .cirth {
546
- -webkit-tap-highlight-color: transparent;
547
- -webkit-text-size-adjust: 100%;
548
- -moz-text-size-adjust: 100%;
549
- text-size-adjust: 100%;
550
- background-color: var(--cirth-background-color);
551
- color: var(--cirth-color);
552
- font-weight: var(--cirth-font-weight);
553
- font-size: var(--cirth-font-size);
554
- line-height: var(--cirth-line-height);
555
- font-family: var(--cirth-font-family);
556
- text-underline-offset: var(--cirth-text-underline-offset);
557
- text-rendering: optimizelegibility;
558
- overflow-wrap: break-word;
559
- tab-size: 4;
560
- width: 100%;
561
- margin: 0;
562
- }
563
-
564
- .cirth main {
565
- display: block;
566
- }
567
-
568
- .cirth > header, .cirth > main, .cirth > footer {
569
- width: 100%;
570
- padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
571
- margin-left: auto;
572
- margin-right: auto;
573
- }
574
-
575
- @media (width >= 576px) {
576
- .cirth > header, .cirth > main, .cirth > footer {
577
- max-width: 510px;
578
- padding-left: 0;
579
- padding-right: 0;
580
- }
581
- }
582
-
583
- @media (width >= 768px) {
584
- .cirth > header, .cirth > main, .cirth > footer {
585
- max-width: 700px;
586
- }
587
- }
588
-
589
- @media (width >= 1024px) {
590
- .cirth > header, .cirth > main, .cirth > footer {
591
- max-width: 950px;
592
- }
593
- }
594
-
595
- @media (width >= 1280px) {
596
- .cirth > header, .cirth > main, .cirth > footer {
597
- max-width: 1200px;
598
- }
599
- }
600
-
601
- @media (width >= 1536px) {
602
- .cirth > header, .cirth > main, .cirth > footer {
603
- max-width: 1450px;
604
- }
605
- }
606
-
607
- .cirth section {
608
- margin-bottom: var(--cirth-block-spacing-vertical);
609
- }
610
-
611
- .cirth b, .cirth strong {
612
- font-weight: bolder;
613
- }
614
-
615
- .cirth sub, .cirth sup {
616
- vertical-align: baseline;
617
- font-size: .75em;
618
- line-height: 0;
619
- position: relative;
620
- }
621
-
622
- .cirth sub {
623
- bottom: -.25em;
624
- }
625
-
626
- .cirth sup {
627
- top: -.5em;
628
- }
629
-
630
- .cirth address, .cirth blockquote, .cirth dl, .cirth ol, .cirth p, .cirth pre, .cirth table, .cirth ul {
631
- margin-top: 0;
632
- margin-bottom: var(--cirth-typography-spacing-vertical);
633
- color: var(--cirth-color);
634
- font-style: normal;
635
- font-weight: var(--cirth-font-weight);
636
- }
637
-
638
- .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
639
- margin-top: 0;
640
- margin-bottom: var(--cirth-typography-spacing-vertical);
641
- color: var(--cirth-color);
642
- font-weight: var(--cirth-font-weight);
643
- font-size: var(--cirth-font-size);
644
- line-height: var(--cirth-line-height);
645
- font-family: var(--cirth-font-family);
646
- }
647
-
648
- .cirth h1 {
649
- --cirth-color: var(--cirth-h1-color);
650
- }
651
-
652
- .cirth h2 {
653
- --cirth-color: var(--cirth-h2-color);
654
- }
655
-
656
- .cirth h3 {
657
- --cirth-color: var(--cirth-h3-color);
658
- }
659
-
660
- .cirth h4 {
661
- --cirth-color: var(--cirth-h4-color);
662
- }
663
-
664
- .cirth h5 {
665
- --cirth-color: var(--cirth-h5-color);
666
- }
667
-
668
- .cirth h6 {
669
- --cirth-color: var(--cirth-h6-color);
670
- }
671
-
672
- .cirth :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
673
- margin-top: var(--cirth-typography-spacing-top);
674
- }
675
-
676
- .cirth p, .cirth hgroup {
677
- margin-bottom: var(--cirth-typography-spacing-vertical);
678
- }
679
-
680
- .cirth hgroup > * {
681
- margin-top: 0;
682
- margin-bottom: 0;
683
- }
684
-
685
- .cirth hgroup > :not(:first-child):last-child {
686
- --cirth-color: var(--cirth-muted-color);
687
- --cirth-font-weight: unset;
688
- font-size: 1rem;
689
- }
690
-
691
- .cirth :where(ol, ul) li {
692
- margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
693
- }
694
-
695
- .cirth :where(dl, ol, ul) :where(dl, ol, ul) {
696
- margin: 0;
697
- margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
698
- }
699
-
700
- .cirth ul li {
701
- list-style: square;
702
- }
703
-
704
- .cirth mark {
705
- background-color: var(--cirth-mark-background-color);
706
- color: var(--cirth-mark-color);
707
- vertical-align: baseline;
708
- padding: .125rem .25rem;
709
- }
710
-
711
- .cirth blockquote {
712
- margin: var(--cirth-typography-spacing-vertical) 0;
713
- padding: var(--cirth-spacing);
714
- border-right: none;
715
- border-left: .25rem solid var(--cirth-blockquote-border-color);
716
- border-inline-start: .25rem solid var(--cirth-blockquote-border-color);
717
- border-inline-end: none;
718
- display: block;
719
- }
720
-
721
- .cirth blockquote footer {
722
- margin-top: calc(var(--cirth-typography-spacing-vertical) * .5);
723
- color: var(--cirth-blockquote-footer-color);
724
- }
725
-
726
- .cirth abbr[title] {
727
- cursor: help;
728
- border-bottom: 1px dotted;
729
- text-decoration: none;
730
- }
731
-
732
- .cirth ins {
733
- color: var(--cirth-ins-color);
734
- text-decoration: none;
735
- }
736
-
737
- .cirth del {
738
- color: var(--cirth-del-color);
739
- }
740
-
741
- .cirth ::selection {
742
- background-color: var(--cirth-text-selection-color);
743
- }
744
-
745
- .cirth [role="link"] {
746
- --cirth-color: var(--cirth-primary);
747
- --cirth-background-color: transparent;
748
- --cirth-underline: var(--cirth-primary-underline);
749
- background-color: var(--cirth-background-color);
750
- color: var(--cirth-color);
751
- -webkit-text-decoration: var(--cirth-text-decoration);
752
- text-decoration: var(--cirth-text-decoration);
753
- -webkit-text-decoration-color: var(--cirth-underline);
754
- text-decoration-color: var(--cirth-underline);
755
- text-underline-offset: .125em;
756
- transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
757
- outline: none;
758
- }
759
-
760
- .cirth :where(a:not([role="button"])) {
761
- --cirth-color: var(--cirth-primary);
762
- --cirth-background-color: transparent;
763
- --cirth-underline: var(--cirth-primary-underline);
764
- background-color: var(--cirth-background-color);
765
- color: var(--cirth-color);
766
- -webkit-text-decoration: var(--cirth-text-decoration);
767
- text-decoration: var(--cirth-text-decoration);
768
- -webkit-text-decoration-color: var(--cirth-underline);
769
- text-decoration-color: var(--cirth-underline);
770
- text-underline-offset: .125em;
771
- transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
772
- outline: none;
773
- }
774
-
775
- .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
776
- --cirth-color: var(--cirth-primary-hover);
777
- --cirth-underline: var(--cirth-primary-hover-underline);
778
- --cirth-text-decoration: underline;
242
+ .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
243
+ --cirth-color: var(--cirth-primary-hover);
244
+ --cirth-underline: var(--cirth-primary-hover-underline);
245
+ --cirth-text-decoration: underline;
779
246
  }
780
247
 
781
248
  .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
@@ -816,7 +283,7 @@
816
283
  box-shadow: var(--cirth-box-shadow);
817
284
  color: var(--cirth-color);
818
285
  font-weight: var(--cirth-font-weight);
819
- font-size: 1rem;
286
+ font-size: var(--cirth-font-size-md);
820
287
  line-height: var(--cirth-line-height);
821
288
  text-align: center;
822
289
  cursor: pointer;
@@ -839,7 +306,7 @@
839
306
  box-shadow: var(--cirth-box-shadow);
840
307
  color: var(--cirth-color);
841
308
  font-weight: var(--cirth-font-weight);
842
- font-size: 1rem;
309
+ font-size: var(--cirth-font-size-md);
843
310
  line-height: var(--cirth-line-height);
844
311
  text-align: center;
845
312
  cursor: pointer;
@@ -862,7 +329,7 @@
862
329
  box-shadow: var(--cirth-box-shadow);
863
330
  color: var(--cirth-color);
864
331
  font-weight: var(--cirth-font-weight);
865
- font-size: 1rem;
332
+ font-size: var(--cirth-font-size-md);
866
333
  line-height: var(--cirth-line-height);
867
334
  text-align: center;
868
335
  cursor: pointer;
@@ -885,7 +352,7 @@
885
352
  box-shadow: var(--cirth-box-shadow);
886
353
  color: var(--cirth-color);
887
354
  font-weight: var(--cirth-font-weight);
888
- font-size: 1rem;
355
+ font-size: var(--cirth-font-size-md);
889
356
  line-height: var(--cirth-line-height);
890
357
  text-align: center;
891
358
  cursor: pointer;
@@ -908,7 +375,7 @@
908
375
  box-shadow: var(--cirth-box-shadow);
909
376
  color: var(--cirth-color);
910
377
  font-weight: var(--cirth-font-weight);
911
- font-size: 1rem;
378
+ font-size: var(--cirth-font-size-md);
912
379
  line-height: var(--cirth-line-height);
913
380
  text-align: center;
914
381
  cursor: pointer;
@@ -997,39 +464,48 @@
997
464
  }
998
465
 
999
466
  .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 {
1000
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
467
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
468
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1001
469
  }
1002
470
 
1003
471
  .cirth [type="submit"]:focus {
1004
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
472
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
473
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1005
474
  }
1006
475
 
1007
476
  .cirth [type="submit"][aria-current]:not([aria-current="false"]):focus {
1008
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
477
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
478
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1009
479
  }
1010
480
 
1011
481
  .cirth [type="reset"]:focus {
1012
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
482
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
483
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1013
484
  }
1014
485
 
1015
486
  .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus {
1016
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
487
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
488
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1017
489
  }
1018
490
 
1019
491
  .cirth [type="button"]:focus {
1020
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
492
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
493
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1021
494
  }
1022
495
 
1023
496
  .cirth [type="button"][aria-current]:not([aria-current="false"]):focus {
1024
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
497
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
498
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1025
499
  }
1026
500
 
1027
501
  .cirth [type="file"]::file-selector-button:focus {
1028
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
502
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
503
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1029
504
  }
1030
505
 
1031
506
  .cirth [type="file"]::file-selector-button:is():focus {
1032
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
507
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
508
+ 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
1033
509
  }
1034
510
 
1035
511
  .cirth [type="submit"] {
@@ -1071,20 +547,22 @@
1071
547
  }
1072
548
 
1073
549
  .cirth [type="reset"]:focus {
1074
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
550
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
551
+ 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1075
552
  }
1076
553
 
1077
554
  .cirth [type="file"]::file-selector-button:focus {
1078
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
555
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
556
+ 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1079
557
  }
1080
558
 
1081
559
  .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled] {
1082
- opacity: .5;
560
+ opacity: var(--cirth-opacity-disabled);
1083
561
  pointer-events: none;
1084
562
  }
1085
563
 
1086
564
  .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
1087
- opacity: .5;
565
+ opacity: var(--cirth-opacity-disabled);
1088
566
  pointer-events: none;
1089
567
  }
1090
568
 
@@ -1211,12 +689,12 @@
1211
689
  height: 0;
1212
690
  margin: var(--cirth-typography-spacing-vertical) 0;
1213
691
  border: 0;
1214
- border-top: 1px solid var(--cirth-muted-border-color);
692
+ border-top: var(--cirth-border-width-1) solid var(--cirth-muted-border-color);
1215
693
  color: inherit;
1216
694
  }
1217
695
 
1218
696
  .cirth [hidden], .cirth template {
1219
- display: none !important;
697
+ display: none;
1220
698
  }
1221
699
 
1222
700
  .cirth canvas {
@@ -1224,7 +702,7 @@
1224
702
  }
1225
703
 
1226
704
  .cirth input, .cirth optgroup, .cirth select, .cirth textarea {
1227
- font-size: 1rem;
705
+ font-size: var(--cirth-font-size-md);
1228
706
  line-height: var(--cirth-line-height);
1229
707
  letter-spacing: inherit;
1230
708
  margin: 0;
@@ -1308,7 +786,7 @@
1308
786
  }
1309
787
 
1310
788
  .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"])) {
1311
- height: calc(1rem * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
789
+ height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
1312
790
  }
1313
791
 
1314
792
  .cirth fieldset {
@@ -1384,11 +862,13 @@
1384
862
  }
1385
863
 
1386
864
  .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly])):focus {
1387
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-form-element-focus-color);
865
+ --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
866
+ var(--cirth-form-element-focus-color);
1388
867
  }
1389
868
 
1390
869
  .cirth :where(select, textarea):not([readonly]):focus {
1391
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-form-element-focus-color);
870
+ --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
871
+ var(--cirth-form-element-focus-color);
1392
872
  }
1393
873
 
1394
874
  .cirth select[disabled], .cirth textarea[disabled], .cirth label[aria-disabled="true"] {
@@ -1411,13 +891,13 @@
1411
891
  }
1412
892
 
1413
893
  .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] {
894
+ padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1414
895
  padding-left: var(--cirth-form-element-spacing-horizontal);
1415
- background-position: right .75rem center;
896
+ background-position: center right var(--cirth-space-3);
897
+ background-size: var(--cirth-size-4) auto;
1416
898
  background-repeat: no-repeat;
1417
- background-size: 1rem;
1418
- padding-right: calc(var(--cirth-form-element-spacing-horizontal) + 1.5rem) !important;
1419
- padding-inline-start: var(--cirth-form-element-spacing-horizontal) !important;
1420
- padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + 1.5rem) !important;
899
+ padding-inline-start: var(--cirth-form-element-spacing-horizontal);
900
+ padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1421
901
  }
1422
902
 
1423
903
  .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) {
@@ -1433,11 +913,12 @@
1433
913
  }
1434
914
 
1435
915
  .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
1436
- --cirth-border-color: var(--cirth-form-element-valid-active-border-color) !important;
916
+ --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
1437
917
  }
1438
918
 
1439
919
  .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
1440
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-form-element-valid-focus-color) !important;
920
+ --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
921
+ var(--cirth-form-element-valid-focus-color);
1441
922
  }
1442
923
 
1443
924
  .cirth :where(input, select, textarea)[aria-invalid="true"] {
@@ -1445,15 +926,16 @@
1445
926
  }
1446
927
 
1447
928
  .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
1448
- --cirth-border-color: var(--cirth-form-element-invalid-active-border-color) !important;
929
+ --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
1449
930
  }
1450
931
 
1451
932
  .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
1452
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-form-element-invalid-focus-color) !important;
933
+ --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
934
+ var(--cirth-form-element-invalid-focus-color);
1453
935
  }
1454
936
 
1455
937
  [dir="rtl"] .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"])):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
1456
- background-position: .75rem;
938
+ background-position: center left var(--cirth-space-3);
1457
939
  }
1458
940
 
1459
941
  .cirth select:invalid {
@@ -1495,14 +977,14 @@
1495
977
  }
1496
978
 
1497
979
  .cirth select:not(:is([multiple], [size])) {
1498
- padding-right: calc(var(--cirth-form-element-spacing-horizontal) + 1.5rem);
980
+ padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1499
981
  padding-left: var(--cirth-form-element-spacing-horizontal);
1500
982
  background-image: var(--cirth-icon-chevron);
1501
- background-position: right .75rem center;
983
+ background-position: center right var(--cirth-space-3);
984
+ background-size: var(--cirth-size-4) auto;
1502
985
  background-repeat: no-repeat;
1503
- background-size: 1rem;
1504
986
  padding-inline-start: var(--cirth-form-element-spacing-horizontal);
1505
- padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + 1.5rem);
987
+ padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1506
988
  }
1507
989
 
1508
990
  .cirth select[multiple] option:checked {
@@ -1511,7 +993,7 @@
1511
993
  }
1512
994
 
1513
995
  [dir="rtl"] .cirth select:not(:is([multiple], [size])) {
1514
- background-position: .75rem;
996
+ background-position: center left var(--cirth-space-3);
1515
997
  }
1516
998
 
1517
999
  .cirth textarea {
@@ -1520,9 +1002,11 @@
1520
1002
  }
1521
1003
 
1522
1004
  .cirth textarea[aria-invalid] {
1523
- --cirth-icon-height: calc(1rem * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
1524
- background-position: right .75rem top !important;
1525
- background-size: 1rem var(--cirth-icon-height) !important;
1005
+ --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
1006
+ var(--cirth-form-element-spacing-vertical) * 2 +
1007
+ var(--cirth-border-width) * 2);
1008
+ background-position: top right var(--cirth-space-3);
1009
+ background-size: var(--cirth-size-4) var(--cirth-icon-height);
1526
1010
  }
1527
1011
 
1528
1012
  .cirth :where(input, select, textarea, fieldset) + small {
@@ -1706,8 +1190,8 @@
1706
1190
  height: 100%;
1707
1191
  box-shadow: var(--cirth-switch-thumb-box-shadow);
1708
1192
  content: "";
1193
+ transition: margin var(--cirth-duration-fast) var(--cirth-ease-in-out);
1709
1194
  border-radius: 50%;
1710
- transition: margin .1s ease-in-out;
1711
1195
  display: block;
1712
1196
  }
1713
1197
 
@@ -1869,8 +1353,8 @@
1869
1353
  }
1870
1354
 
1871
1355
  .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1872
- --cirth-icon-position: .75rem;
1873
- --cirth-icon-width: 1rem;
1356
+ --cirth-icon-position: var(--cirth-space-3);
1357
+ --cirth-icon-width: var(--cirth-size-4);
1874
1358
  padding-right: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
1875
1359
  background-image: var(--cirth-icon-date);
1876
1360
  background-position: center right var(--cirth-icon-position);
@@ -1919,28 +1403,28 @@
1919
1403
 
1920
1404
  @-moz-document url-prefix() {
1921
1405
  .cirth [type="date"] {
1922
- padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1923
- background-image: none !important;
1406
+ padding-right: var(--cirth-form-element-spacing-horizontal);
1407
+ background-image: none;
1924
1408
  }
1925
1409
 
1926
1410
  .cirth [type="datetime-local"] {
1927
- padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1928
- background-image: none !important;
1411
+ padding-right: var(--cirth-form-element-spacing-horizontal);
1412
+ background-image: none;
1929
1413
  }
1930
1414
 
1931
1415
  .cirth [type="month"] {
1932
- padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1933
- background-image: none !important;
1416
+ padding-right: var(--cirth-form-element-spacing-horizontal);
1417
+ background-image: none;
1934
1418
  }
1935
1419
 
1936
1420
  .cirth [type="time"] {
1937
- padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1938
- background-image: none !important;
1421
+ padding-right: var(--cirth-form-element-spacing-horizontal);
1422
+ background-image: none;
1939
1423
  }
1940
1424
 
1941
1425
  .cirth [type="week"] {
1942
- padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1943
- background-image: none !important;
1426
+ padding-right: var(--cirth-form-element-spacing-horizontal);
1427
+ background-image: none;
1944
1428
  }
1945
1429
  }
1946
1430
 
@@ -1969,7 +1453,8 @@
1969
1453
  }
1970
1454
 
1971
1455
  .cirth [type="file"]:focus::file-selector-button {
1972
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1456
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1457
+ 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1973
1458
  }
1974
1459
 
1975
1460
  .cirth [type="range"] {
@@ -2005,7 +1490,7 @@
2005
1490
 
2006
1491
  .cirth [type="range"]::-webkit-slider-thumb {
2007
1492
  -webkit-appearance: none;
2008
- border: 2px solid var(--cirth-range-thumb-border-color);
1493
+ border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
2009
1494
  background-color: var(--cirth-range-thumb-color);
2010
1495
  cursor: pointer;
2011
1496
  width: 1.25rem;
@@ -2017,7 +1502,7 @@
2017
1502
 
2018
1503
  .cirth [type="range"]::-moz-range-thumb {
2019
1504
  -webkit-appearance: none;
2020
- border: 2px solid var(--cirth-range-thumb-border-color);
1505
+ border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
2021
1506
  background-color: var(--cirth-range-thumb-color);
2022
1507
  cursor: pointer;
2023
1508
  width: 1.25rem;
@@ -2029,7 +1514,7 @@
2029
1514
 
2030
1515
  .cirth [type="range"]::-ms-thumb {
2031
1516
  -webkit-appearance: none;
2032
- border: 2px solid var(--cirth-range-thumb-border-color);
1517
+ border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
2033
1518
  background-color: var(--cirth-range-thumb-color);
2034
1519
  cursor: pointer;
2035
1520
  width: 1.25rem;
@@ -2071,7 +1556,7 @@
2071
1556
 
2072
1557
  .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
2073
1558
  background-position: 1.125rem, right .75rem center;
2074
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem) !important;
1559
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
2075
1560
  }
2076
1561
 
2077
1562
  .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="false"] {
@@ -2096,9 +1581,9 @@
2096
1581
  }
2097
1582
 
2098
1583
  .cirth details summary {
1584
+ line-height: var(--cirth-size-4);
2099
1585
  cursor: pointer;
2100
1586
  transition: color var(--cirth-transition);
2101
- line-height: 1rem;
2102
1587
  list-style-type: none;
2103
1588
  }
2104
1589
 
@@ -2119,16 +1604,16 @@
2119
1604
  }
2120
1605
 
2121
1606
  .cirth details summary:after {
2122
- width: 1rem;
2123
- height: 1rem;
1607
+ width: var(--cirth-size-4);
1608
+ height: var(--cirth-size-4);
2124
1609
  float: right;
2125
1610
  background-image: var(--cirth-icon-chevron);
1611
+ background-position: 100%;
1612
+ background-size: var(--cirth-size-4) auto;
2126
1613
  content: "";
2127
1614
  transition: transform var(--cirth-transition);
2128
- background-position: 100%;
2129
1615
  background-repeat: no-repeat;
2130
- background-size: 1rem;
2131
- margin-inline-start: calc(var(--cirth-spacing, 1rem) * .5);
1616
+ margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
2132
1617
  display: block;
2133
1618
  transform: rotate(-90deg);
2134
1619
  }
@@ -2143,7 +1628,7 @@
2143
1628
 
2144
1629
  .cirth details summary:focus-visible:not([role]) {
2145
1630
  outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
2146
- outline-offset: calc(var(--cirth-spacing, 1rem) * .5);
1631
+ outline-offset: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
2147
1632
  color: var(--cirth-primary);
2148
1633
  }
2149
1634
 
@@ -2153,7 +1638,7 @@
2153
1638
  }
2154
1639
 
2155
1640
  .cirth details summary[role="button"]:after {
2156
- height: calc(1rem * var(--cirth-line-height, 1.5));
1641
+ height: calc(var(--cirth-size-4) * var(--cirth-line-height, var(--cirth-line-height-normal)));
2157
1642
  }
2158
1643
 
2159
1644
  .cirth details[open] > summary {
@@ -2380,580 +1865,1240 @@
2380
1865
  }
2381
1866
 
2382
1867
  .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
2383
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2384
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1868
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1869
+ var(--cirth-primary-border);
1870
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1871
+ var(--cirth-primary-hover-border);
2385
1872
  }
2386
1873
 
2387
1874
  .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
2388
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2389
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1875
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1876
+ var(--cirth-primary-border);
1877
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1878
+ var(--cirth-primary-hover-border);
2390
1879
  }
2391
1880
 
2392
1881
  .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
2393
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2394
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1882
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1883
+ var(--cirth-primary-border);
1884
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1885
+ var(--cirth-primary-hover-border);
2395
1886
  }
2396
1887
 
2397
1888
  .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
2398
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2399
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1889
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1890
+ var(--cirth-primary-border);
1891
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1892
+ var(--cirth-primary-hover-border);
2400
1893
  }
2401
1894
 
2402
1895
  .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
2403
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2404
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1896
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1897
+ var(--cirth-primary-border);
1898
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1899
+ var(--cirth-primary-hover-border);
2405
1900
  }
2406
1901
 
2407
1902
  .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
2408
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2409
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1903
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1904
+ var(--cirth-primary-border);
1905
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1906
+ var(--cirth-primary-hover-border);
2410
1907
  }
2411
1908
 
2412
1909
  .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
2413
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2414
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
1910
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1911
+ var(--cirth-primary-border);
1912
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1913
+ var(--cirth-primary-hover-border);
1914
+ }
1915
+
1916
+ .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1917
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1918
+ var(--cirth-primary-border);
1919
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1920
+ var(--cirth-primary-hover-border);
1921
+ }
1922
+
1923
+ .cirth [role="search"] button:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [role="button"]:focus {
1924
+ box-shadow: none;
1925
+ }
1926
+
1927
+ .cirth [role="search"] [type="submit"]:focus {
1928
+ box-shadow: none;
1929
+ }
1930
+
1931
+ .cirth [role="search"] [type="reset"]:focus {
1932
+ box-shadow: none;
1933
+ }
1934
+
1935
+ .cirth [role="search"] [type="button"]:focus {
1936
+ box-shadow: none;
1937
+ }
1938
+
1939
+ .cirth [role="group"] [type="submit"]:focus {
1940
+ box-shadow: none;
1941
+ }
1942
+
1943
+ .cirth [role="group"] [type="reset"]:focus {
1944
+ box-shadow: none;
1945
+ }
1946
+
1947
+ .cirth [role="group"] [type="button"]:focus {
1948
+ box-shadow: none;
1949
+ }
1950
+ }
1951
+
1952
+ .cirth [role="search"] > :first-child {
1953
+ border-top-left-radius: var(--cirth-radius-pill);
1954
+ border-bottom-left-radius: var(--cirth-radius-pill);
1955
+ }
1956
+
1957
+ .cirth [role="search"] > :last-child {
1958
+ border-top-right-radius: var(--cirth-radius-pill);
1959
+ border-bottom-right-radius: var(--cirth-radius-pill);
1960
+ }
1961
+
1962
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
1963
+ white-space: nowrap;
1964
+ }
1965
+
1966
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):before {
1967
+ background-image: var(--cirth-icon-loading);
1968
+ content: "";
1969
+ vertical-align: -.125em;
1970
+ background-repeat: no-repeat;
1971
+ background-size: 1em;
1972
+ width: 1em;
1973
+ height: 1em;
1974
+ display: inline-block;
1975
+ }
1976
+
1977
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
1978
+ margin-inline-end: calc(var(--cirth-spacing) * .5);
1979
+ }
1980
+
1981
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
1982
+ text-align: center;
1983
+ }
1984
+
1985
+ .cirth button[aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
1986
+ pointer-events: none;
1987
+ }
1988
+
1989
+ .cirth [type="submit"][aria-busy="true"] {
1990
+ pointer-events: none;
1991
+ }
1992
+
1993
+ .cirth [type="button"][aria-busy="true"] {
1994
+ pointer-events: none;
1995
+ }
1996
+
1997
+ .cirth [type="reset"][aria-busy="true"] {
1998
+ pointer-events: none;
1999
+ }
2000
+
2001
+ .cirth {
2002
+ --cirth-scrollbar-width: 0px;
2003
+ }
2004
+
2005
+ .cirth dialog {
2006
+ z-index: var(--cirth-z-index-modal);
2007
+ width: inherit;
2008
+ min-width: 100%;
2009
+ height: inherit;
2010
+ min-height: 100%;
2011
+ -webkit-backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
2012
+ backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
2013
+ background-color: var(--cirth-modal-overlay-background-color);
2014
+ color: var(--cirth-color);
2015
+ border: 0;
2016
+ justify-content: center;
2017
+ align-items: center;
2018
+ padding: 0;
2019
+ display: flex;
2020
+ position: fixed;
2021
+ inset: 0;
2022
+ }
2023
+
2024
+ .cirth dialog > article {
2025
+ width: 100%;
2026
+ max-height: calc(100vh - var(--cirth-spacing) * 2);
2027
+ margin: var(--cirth-spacing);
2028
+ overflow: auto;
2029
+ }
2030
+
2031
+ @media (width >= 576px) {
2032
+ .cirth dialog > article {
2033
+ max-width: 510px;
2034
+ }
2035
+ }
2036
+
2037
+ @media (width >= 768px) {
2038
+ .cirth dialog > article {
2039
+ max-width: 700px;
2415
2040
  }
2041
+ }
2042
+
2043
+ .cirth dialog > article > header > * {
2044
+ margin-bottom: 0;
2045
+ }
2046
+
2047
+ .cirth dialog > article > header :is(a, button)[rel="prev"] {
2048
+ margin: 0;
2049
+ margin-left: var(--cirth-spacing);
2050
+ float: right;
2051
+ padding: 0;
2052
+ }
2053
+
2054
+ .cirth dialog > article > footer {
2055
+ text-align: right;
2056
+ }
2057
+
2058
+ .cirth dialog > article > footer button, .cirth dialog > article > footer [role="button"] {
2059
+ margin-bottom: 0;
2060
+ }
2061
+
2062
+ .cirth dialog > article > footer button:not(:first-of-type), .cirth dialog > article > footer [role="button"]:not(:first-of-type) {
2063
+ margin-left: calc(var(--cirth-spacing) * .5);
2064
+ }
2065
+
2066
+ .cirth dialog > article :is(a, button)[rel="prev"] {
2067
+ width: var(--cirth-size-4);
2068
+ height: var(--cirth-size-4);
2069
+ margin-top: calc(var(--cirth-spacing) * -1);
2070
+ margin-bottom: var(--cirth-spacing);
2071
+ background-image: var(--cirth-icon-close);
2072
+ background-position: center;
2073
+ background-size: auto var(--cirth-size-4);
2074
+ opacity: .5;
2075
+ transition: opacity var(--cirth-transition);
2076
+ background-color: rgba(0, 0, 0, 0);
2077
+ background-repeat: no-repeat;
2078
+ border: none;
2079
+ margin-left: auto;
2080
+ display: block;
2081
+ }
2082
+
2083
+ .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2084
+ opacity: 1;
2085
+ }
2086
+
2087
+ .cirth dialog:not([open]), .cirth dialog[open="false"] {
2088
+ display: none;
2089
+ }
2090
+
2091
+ :where(nav li):before {
2092
+ float: left;
2093
+ content: "​";
2094
+ }
2095
+
2096
+ .cirth nav, .cirth nav ul {
2097
+ display: flex;
2098
+ }
2416
2099
 
2417
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
2418
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-border);
2419
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width) var(--cirth-primary-hover-border);
2420
- }
2100
+ .cirth nav {
2101
+ justify-content: space-between;
2102
+ overflow: visible;
2103
+ }
2421
2104
 
2422
- .cirth [role="search"] button:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [role="button"]:focus {
2423
- box-shadow: none;
2424
- }
2105
+ .cirth nav ol, .cirth nav ul {
2106
+ align-items: center;
2107
+ margin-bottom: 0;
2108
+ padding: 0;
2109
+ list-style: none;
2110
+ }
2425
2111
 
2426
- .cirth [role="search"] [type="submit"]:focus {
2427
- box-shadow: none;
2428
- }
2112
+ .cirth nav ol:first-of-type, .cirth nav ul:first-of-type {
2113
+ margin-left: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
2114
+ }
2429
2115
 
2430
- .cirth [role="search"] [type="reset"]:focus {
2431
- box-shadow: none;
2432
- }
2116
+ .cirth nav ol:last-of-type, .cirth nav ul:last-of-type {
2117
+ margin-right: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
2118
+ }
2433
2119
 
2434
- .cirth [role="search"] [type="button"]:focus {
2435
- box-shadow: none;
2436
- }
2120
+ .cirth nav li {
2121
+ padding: var(--cirth-nav-element-spacing-vertical) var(--cirth-nav-element-spacing-horizontal);
2122
+ margin: 0;
2123
+ display: inline-block;
2124
+ }
2437
2125
 
2438
- .cirth [role="group"] [type="submit"]:focus {
2439
- box-shadow: none;
2440
- }
2126
+ .cirth nav li :where(a, [role="link"]) {
2127
+ margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) calc(var(--cirth-nav-link-spacing-horizontal) * -1);
2128
+ padding: var(--cirth-nav-link-spacing-vertical) var(--cirth-nav-link-spacing-horizontal);
2129
+ border-radius: var(--cirth-border-radius);
2130
+ display: inline-block;
2131
+ }
2441
2132
 
2442
- .cirth [role="group"] [type="reset"]:focus {
2443
- box-shadow: none;
2444
- }
2133
+ .cirth nav li :where(a, [role="link"]):not(:hover) {
2134
+ text-decoration: none;
2135
+ }
2445
2136
 
2446
- .cirth [role="group"] [type="button"]:focus {
2447
- box-shadow: none;
2448
- }
2137
+ .cirth nav li button, .cirth nav li [role="button"], .cirth nav li select {
2138
+ height: auto;
2139
+ margin-right: inherit;
2140
+ margin-bottom: 0;
2141
+ margin-left: inherit;
2142
+ padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2449
2143
  }
2450
2144
 
2451
- .cirth [role="search"] > :first-child {
2452
- border-top-left-radius: 5rem;
2453
- border-bottom-left-radius: 5rem;
2145
+ .cirth nav li [type="button"] {
2146
+ height: auto;
2147
+ margin-right: inherit;
2148
+ margin-bottom: 0;
2149
+ margin-left: inherit;
2150
+ padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2454
2151
  }
2455
2152
 
2456
- .cirth [role="search"] > :last-child {
2457
- border-top-right-radius: 5rem;
2458
- border-bottom-right-radius: 5rem;
2153
+ .cirth nav li input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
2154
+ height: auto;
2155
+ margin-right: inherit;
2156
+ margin-bottom: 0;
2157
+ margin-left: inherit;
2158
+ padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2459
2159
  }
2460
2160
 
2461
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
2462
- white-space: nowrap;
2161
+ .cirth nav[aria-label="breadcrumb"] {
2162
+ justify-content: start;
2163
+ align-items: center;
2463
2164
  }
2464
2165
 
2465
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):before {
2466
- background-image: var(--cirth-icon-loading);
2467
- content: "";
2468
- vertical-align: -.125em;
2469
- background-repeat: no-repeat;
2470
- background-size: 1em;
2471
- width: 1em;
2472
- height: 1em;
2473
- display: inline-block;
2166
+ .cirth nav[aria-label="breadcrumb"] ul li:not(:first-child) {
2167
+ margin-inline-start: var(--cirth-nav-link-spacing-horizontal);
2474
2168
  }
2475
2169
 
2476
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
2477
- margin-inline-end: calc(var(--cirth-spacing) * .5);
2170
+ .cirth nav[aria-label="breadcrumb"] ul li a {
2171
+ margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) 0;
2172
+ margin-inline-start: calc(var(--cirth-nav-link-spacing-horizontal) * -1);
2478
2173
  }
2479
2174
 
2480
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
2175
+ .cirth nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
2176
+ width: calc(var(--cirth-nav-link-spacing-horizontal) * 4);
2177
+ margin: 0 calc(var(--cirth-nav-link-spacing-horizontal) * -1);
2178
+ content: var(--cirth-nav-breadcrumb-divider);
2179
+ color: var(--cirth-muted-color);
2481
2180
  text-align: center;
2181
+ white-space: nowrap;
2182
+ text-decoration: none;
2183
+ display: inline-block;
2184
+ position: absolute;
2482
2185
  }
2483
2186
 
2484
- .cirth button[aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
2187
+ .cirth nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2188
+ color: inherit;
2485
2189
  pointer-events: none;
2190
+ background-color: rgba(0, 0, 0, 0);
2191
+ text-decoration: none;
2486
2192
  }
2487
2193
 
2488
- .cirth [type="submit"][aria-busy="true"] {
2489
- pointer-events: none;
2194
+ .cirth aside nav, .cirth aside ol, .cirth aside ul, .cirth aside li {
2195
+ display: block;
2490
2196
  }
2491
2197
 
2492
- .cirth [type="button"][aria-busy="true"] {
2493
- pointer-events: none;
2198
+ .cirth aside li {
2199
+ padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) var(--cirth-nav-element-spacing-horizontal);
2494
2200
  }
2495
2201
 
2496
- .cirth [type="reset"][aria-busy="true"] {
2497
- pointer-events: none;
2202
+ .cirth aside li a {
2203
+ display: block;
2498
2204
  }
2499
2205
 
2500
- .cirth {
2501
- --cirth-scrollbar-width: 0px;
2206
+ .cirth aside li [role="button"] {
2207
+ margin: inherit;
2502
2208
  }
2503
2209
 
2504
- .cirth dialog {
2505
- z-index: 999;
2506
- width: inherit;
2507
- min-width: 100%;
2508
- height: inherit;
2509
- min-height: 100%;
2510
- -webkit-backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
2511
- backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
2512
- background-color: var(--cirth-modal-overlay-background-color);
2513
- color: var(--cirth-color);
2514
- border: 0;
2515
- justify-content: center;
2516
- align-items: center;
2517
- padding: 0;
2518
- display: flex;
2519
- position: fixed;
2520
- inset: 0;
2210
+ [dir="rtl"] .cirth nav[aria-label="breadcrumb"] ul li:not(:last-child) :after {
2211
+ content: "\\";
2521
2212
  }
2522
2213
 
2523
- .cirth dialog > article {
2214
+ .cirth progress {
2215
+ vertical-align: baseline;
2216
+ appearance: none;
2524
2217
  width: 100%;
2525
- max-height: calc(100vh - var(--cirth-spacing) * 2);
2526
- margin: var(--cirth-spacing);
2527
- overflow: auto;
2218
+ height: var(--cirth-size-2);
2219
+ margin-bottom: calc(var(--cirth-spacing) * .5);
2220
+ border-radius: var(--cirth-border-radius);
2221
+ background-color: var(--cirth-progress-background-color);
2222
+ color: var(--cirth-progress-color);
2223
+ border: 0;
2224
+ display: inline-block;
2225
+ overflow: hidden;
2528
2226
  }
2529
2227
 
2530
- @media (width >= 576px) {
2531
- .cirth dialog > article {
2532
- max-width: 510px;
2228
+ .cirth progress::-webkit-progress-bar {
2229
+ border-radius: var(--cirth-border-radius);
2230
+ background: none;
2231
+ }
2232
+
2233
+ .cirth progress[value]::-webkit-progress-value {
2234
+ background-color: var(--cirth-progress-color);
2235
+ transition: inline-size var(--cirth-transition);
2236
+ }
2237
+
2238
+ .cirth progress::-moz-progress-bar {
2239
+ background-color: var(--cirth-progress-color);
2240
+ }
2241
+
2242
+ @media (prefers-reduced-motion: no-preference) {
2243
+ .cirth progress:indeterminate {
2244
+ 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;
2245
+ animation: 1s linear infinite progress-indeterminate;
2246
+ }
2247
+
2248
+ .cirth progress:indeterminate[value]::-webkit-progress-value {
2249
+ background-color: rgba(0, 0, 0, 0);
2250
+ }
2251
+
2252
+ .cirth progress:indeterminate::-moz-progress-bar {
2253
+ background-color: rgba(0, 0, 0, 0);
2254
+ }
2255
+
2256
+ [dir="rtl"] .cirth progress:indeterminate {
2257
+ animation-direction: reverse;
2533
2258
  }
2534
2259
  }
2535
2260
 
2536
- @media (width >= 768px) {
2537
- .cirth dialog > article {
2538
- max-width: 700px;
2261
+ @keyframes progress-indeterminate {
2262
+ 0% {
2263
+ background-position: 200% 0;
2264
+ }
2265
+
2266
+ 100% {
2267
+ background-position: -200% 0;
2539
2268
  }
2540
2269
  }
2541
2270
 
2542
- .cirth dialog > article > header > * {
2543
- margin-bottom: 0;
2271
+ .cirth [data-tooltip] {
2272
+ position: relative;
2544
2273
  }
2545
2274
 
2546
- .cirth dialog > article > header :is(a, button)[rel="prev"] {
2547
- margin: 0;
2548
- margin-left: var(--cirth-spacing);
2549
- float: right;
2275
+ .cirth [data-tooltip]:not(:is(a, button, input, [role="button"])) {
2276
+ border-bottom: var(--cirth-border-width-1) dotted;
2277
+ cursor: help;
2278
+ text-decoration: none;
2279
+ }
2280
+
2281
+ .cirth [data-tooltip][data-placement="top"]:before, .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:before, .cirth [data-tooltip]:after {
2282
+ z-index: var(--cirth-z-index-tooltip);
2283
+ padding: var(--cirth-space-1) var(--cirth-space-2);
2284
+ border-radius: var(--cirth-border-radius);
2285
+ background: var(--cirth-tooltip-background-color);
2286
+ content: attr(data-tooltip);
2287
+ color: var(--cirth-tooltip-color);
2288
+ font-style: normal;
2289
+ font-weight: var(--cirth-font-weight);
2290
+ font-size: var(--cirth-font-size-sm);
2291
+ text-overflow: ellipsis;
2292
+ white-space: nowrap;
2293
+ opacity: 0;
2294
+ pointer-events: none;
2295
+ text-decoration: none;
2296
+ display: block;
2297
+ position: absolute;
2298
+ bottom: 100%;
2299
+ left: 50%;
2300
+ overflow: hidden;
2301
+ transform: translate(-50%, -.25rem);
2302
+ }
2303
+
2304
+ .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
2305
+ content: "";
2306
+ color: var(--cirth-tooltip-background-color);
2307
+ background-color: rgba(0, 0, 0, 0);
2308
+ border-top: .3rem solid;
2309
+ border-left: .3rem solid rgba(0, 0, 0, 0);
2310
+ border-right: .3rem solid rgba(0, 0, 0, 0);
2311
+ border-radius: 0;
2550
2312
  padding: 0;
2313
+ transform: translate(-50%);
2314
+ }
2315
+
2316
+ .cirth [data-tooltip][data-placement="bottom"]:before, .cirth [data-tooltip][data-placement="bottom"]:after {
2317
+ top: 100%;
2318
+ bottom: auto;
2319
+ transform: translate(-50%, .25rem);
2320
+ }
2321
+
2322
+ .cirth [data-tooltip][data-placement="bottom"]:after {
2323
+ border: .3rem solid rgba(0, 0, 0, 0);
2324
+ border-bottom-color: currentColor;
2325
+ transform: translate(-50%, -.3rem);
2551
2326
  }
2552
2327
 
2553
- .cirth dialog > article > footer {
2554
- text-align: right;
2328
+ .cirth [data-tooltip][data-placement="left"]:before, .cirth [data-tooltip][data-placement="left"]:after {
2329
+ inset: 50% 100% auto auto;
2330
+ transform: translate(-.25rem, -50%);
2555
2331
  }
2556
2332
 
2557
- .cirth dialog > article > footer button, .cirth dialog > article > footer [role="button"] {
2558
- margin-bottom: 0;
2333
+ .cirth [data-tooltip][data-placement="left"]:after {
2334
+ border: .3rem solid rgba(0, 0, 0, 0);
2335
+ border-left-color: currentColor;
2336
+ transform: translate(.3rem, -50%);
2559
2337
  }
2560
2338
 
2561
- .cirth dialog > article > footer button:not(:first-of-type), .cirth dialog > article > footer [role="button"]:not(:first-of-type) {
2562
- margin-left: calc(var(--cirth-spacing) * .5);
2339
+ .cirth [data-tooltip][data-placement="right"]:before, .cirth [data-tooltip][data-placement="right"]:after {
2340
+ inset: 50% auto auto 100%;
2341
+ transform: translate(.25rem, -50%);
2563
2342
  }
2564
2343
 
2565
- .cirth dialog > article :is(a, button)[rel="prev"] {
2566
- width: 1rem;
2567
- height: 1rem;
2568
- margin-top: calc(var(--cirth-spacing) * -1);
2569
- margin-bottom: var(--cirth-spacing);
2570
- background-image: var(--cirth-icon-close);
2571
- opacity: .5;
2572
- transition: opacity var(--cirth-transition);
2573
- background-color: rgba(0, 0, 0, 0);
2574
- background-position: center;
2575
- background-repeat: no-repeat;
2576
- background-size: auto 1rem;
2577
- border: none;
2578
- margin-left: auto;
2579
- display: block;
2344
+ .cirth [data-tooltip][data-placement="right"]:after {
2345
+ border: .3rem solid rgba(0, 0, 0, 0);
2346
+ border-right-color: currentColor;
2347
+ transform: translate(-.3rem, -50%);
2580
2348
  }
2581
2349
 
2582
- .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2350
+ .cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
2583
2351
  opacity: 1;
2584
2352
  }
2585
2353
 
2586
- .cirth dialog:not([open]), .cirth dialog[open="false"] {
2587
- display: none;
2588
- }
2354
+ @media (hover: hover) and (pointer: fine) {
2355
+ .cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
2356
+ --cirth-tooltip-slide-to: translate(-50%, -.25rem);
2357
+ animation-duration: var(--cirth-duration-normal);
2358
+ opacity: 0;
2359
+ animation-name: tooltip-slide;
2360
+ animation-fill-mode: forwards;
2361
+ transform: translate(-50%, .75rem);
2362
+ }
2589
2363
 
2590
- :where(nav li):before {
2591
- float: left;
2592
- content: "​";
2593
- }
2364
+ .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:after {
2365
+ --cirth-tooltip-caret-slide-to: translate(-50%, 0rem);
2366
+ animation-name: tooltip-caret-slide;
2367
+ transform: translate(-50%, -.25rem);
2368
+ }
2594
2369
 
2595
- .cirth nav, .cirth nav ul {
2596
- display: flex;
2597
- }
2370
+ .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 {
2371
+ --cirth-tooltip-slide-to: translate(-50%, .25rem);
2372
+ animation-name: tooltip-slide;
2373
+ transform: translate(-50%, -.75rem);
2374
+ }
2598
2375
 
2599
- .cirth nav {
2600
- justify-content: space-between;
2601
- overflow: visible;
2602
- }
2376
+ .cirth [data-tooltip][data-placement="bottom"]:focus:after, .cirth [data-tooltip][data-placement="bottom"]:hover:after {
2377
+ --cirth-tooltip-caret-slide-to: translate(-50%, -.3rem);
2378
+ animation-name: tooltip-caret-slide;
2379
+ transform: translate(-50%, -.5rem);
2380
+ }
2603
2381
 
2604
- .cirth nav ol, .cirth nav ul {
2605
- align-items: center;
2606
- margin-bottom: 0;
2607
- padding: 0;
2608
- list-style: none;
2609
- }
2382
+ .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 {
2383
+ --cirth-tooltip-slide-to: translate(-.25rem, -50%);
2384
+ animation-name: tooltip-slide;
2385
+ transform: translate(.75rem, -50%);
2386
+ }
2610
2387
 
2611
- .cirth nav ol:first-of-type, .cirth nav ul:first-of-type {
2612
- margin-left: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
2613
- }
2388
+ .cirth [data-tooltip][data-placement="left"]:focus:after, .cirth [data-tooltip][data-placement="left"]:hover:after {
2389
+ --cirth-tooltip-caret-slide-to: translate(.3rem, -50%);
2390
+ animation-name: tooltip-caret-slide;
2391
+ transform: translate(.05rem, -50%);
2392
+ }
2614
2393
 
2615
- .cirth nav ol:last-of-type, .cirth nav ul:last-of-type {
2616
- margin-right: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
2617
- }
2394
+ .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 {
2395
+ --cirth-tooltip-slide-to: translate(.25rem, -50%);
2396
+ animation-name: tooltip-slide;
2397
+ transform: translate(-.75rem, -50%);
2398
+ }
2618
2399
 
2619
- .cirth nav li {
2620
- padding: var(--cirth-nav-element-spacing-vertical) var(--cirth-nav-element-spacing-horizontal);
2621
- margin: 0;
2622
- display: inline-block;
2400
+ .cirth [data-tooltip][data-placement="right"]:focus:after, .cirth [data-tooltip][data-placement="right"]:hover:after {
2401
+ --cirth-tooltip-caret-slide-to: translate(-.3rem, -50%);
2402
+ animation-name: tooltip-caret-slide;
2403
+ transform: translate(-.05rem, -50%);
2404
+ }
2623
2405
  }
2624
2406
 
2625
- .cirth nav li :where(a, [role="link"]) {
2626
- margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) calc(var(--cirth-nav-link-spacing-horizontal) * -1);
2627
- padding: var(--cirth-nav-link-spacing-vertical) var(--cirth-nav-link-spacing-horizontal);
2628
- border-radius: var(--cirth-border-radius);
2629
- display: inline-block;
2407
+ @keyframes tooltip-slide {
2408
+ to {
2409
+ transform: var(--cirth-tooltip-slide-to);
2410
+ opacity: 1;
2411
+ }
2630
2412
  }
2631
2413
 
2632
- .cirth nav li :where(a, [role="link"]):not(:hover) {
2633
- text-decoration: none;
2414
+ @keyframes tooltip-caret-slide {
2415
+ 50% {
2416
+ opacity: 0;
2417
+ }
2418
+
2419
+ to {
2420
+ transform: var(--cirth-tooltip-caret-slide-to);
2421
+ opacity: 1;
2422
+ }
2634
2423
  }
2635
2424
 
2636
- .cirth nav li button, .cirth nav li [role="button"], .cirth nav li select {
2637
- height: auto;
2638
- margin-right: inherit;
2639
- margin-bottom: 0;
2640
- margin-left: inherit;
2641
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2425
+ .cirth [aria-controls] {
2426
+ cursor: pointer;
2642
2427
  }
2643
2428
 
2644
- .cirth nav li [type="button"] {
2645
- height: auto;
2646
- margin-right: inherit;
2647
- margin-bottom: 0;
2648
- margin-left: inherit;
2649
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2429
+ .cirth [aria-disabled="true"], .cirth [disabled] {
2430
+ cursor: not-allowed;
2650
2431
  }
2651
2432
 
2652
- .cirth nav li input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
2653
- height: auto;
2654
- margin-right: inherit;
2655
- margin-bottom: 0;
2656
- margin-left: inherit;
2657
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2433
+ .cirth [aria-hidden="false"][hidden] {
2434
+ display: initial;
2658
2435
  }
2659
2436
 
2660
- .cirth nav[aria-label="breadcrumb"] {
2661
- justify-content: start;
2662
- align-items: center;
2437
+ .cirth [aria-hidden="false"][hidden]:not(:focus) {
2438
+ clip: rect(0, 0, 0, 0);
2439
+ position: absolute;
2663
2440
  }
2664
2441
 
2665
- .cirth nav[aria-label="breadcrumb"] ul li:not(:first-child) {
2666
- margin-inline-start: var(--cirth-nav-link-spacing-horizontal);
2442
+ .cirth a, .cirth area, .cirth button, .cirth input, .cirth label, .cirth select, .cirth summary, .cirth textarea, .cirth [tabindex] {
2443
+ -ms-touch-action: manipulation;
2667
2444
  }
2668
2445
 
2669
- .cirth nav[aria-label="breadcrumb"] ul li a {
2670
- margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) 0;
2671
- margin-inline-start: calc(var(--cirth-nav-link-spacing-horizontal) * -1);
2446
+ .cirth [dir="rtl"] {
2447
+ direction: rtl;
2672
2448
  }
2673
2449
 
2674
- .cirth nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
2675
- width: calc(var(--cirth-nav-link-spacing-horizontal) * 4);
2676
- margin: 0 calc(var(--cirth-nav-link-spacing-horizontal) * -1);
2677
- content: var(--cirth-nav-breadcrumb-divider);
2678
- color: var(--cirth-muted-color);
2679
- text-align: center;
2680
- white-space: nowrap;
2681
- text-decoration: none;
2682
- display: inline-block;
2683
- position: absolute;
2450
+ @media (prefers-reduced-motion: reduce) {
2451
+ .cirth :not([aria-busy="true"]), .cirth :not([aria-busy="true"]):before, .cirth :not([aria-busy="true"]):after {
2452
+ background-attachment: initial;
2453
+ scroll-behavior: auto;
2454
+ transition-delay: var(--cirth-duration-instant);
2455
+ transition-duration: var(--cirth-duration-instant);
2456
+ animation-duration: 1ms;
2457
+ animation-iteration-count: 1;
2458
+ animation-delay: -1ms;
2459
+ }
2684
2460
  }
2685
2461
 
2686
- .cirth nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2687
- color: inherit;
2688
- pointer-events: none;
2689
- background-color: rgba(0, 0, 0, 0);
2690
- text-decoration: none;
2462
+ .cirth {
2463
+ --cirth-color-black: #000;
2464
+ --cirth-color-white: #fff;
2465
+ --cirth-color-transparent: transparent;
2466
+ --cirth-color-current: currentColor;
2467
+ --cirth-font-family-ui: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2468
+ "Helvetica Neue", sans-serif;
2469
+ --cirth-font-family-sans: var(--cirth-font-family-ui), "Apple Color Emoji", "Segoe UI Emoji",
2470
+ "Segoe UI Symbol", "Noto Color Emoji";
2471
+ --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
2472
+ --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
2473
+ monospace;
2474
+ --cirth-font-family-display: var(--cirth-font-family-sans);
2475
+ --cirth-font-size-xs: .75rem;
2476
+ --cirth-font-size-sm: .875rem;
2477
+ --cirth-font-size-md: 1rem;
2478
+ --cirth-font-size-lg: 1.125rem;
2479
+ --cirth-font-size-xl: 1.25rem;
2480
+ --cirth-font-size-2xl: 1.425rem;
2481
+ --cirth-font-size-3xl: 1.6rem;
2482
+ --cirth-font-size-4xl: 1.8rem;
2483
+ --cirth-font-size-5xl: 2rem;
2484
+ --cirth-font-size-6xl: 2.3rem;
2485
+ --cirth-font-weight-light: 300;
2486
+ --cirth-font-weight-regular: 400;
2487
+ --cirth-font-weight-medium: 500;
2488
+ --cirth-font-weight-semibold: 600;
2489
+ --cirth-font-weight-bold: 700;
2490
+ --cirth-line-height-none: 1;
2491
+ --cirth-line-height-tight: 1.125;
2492
+ --cirth-line-height-snug: 1.25;
2493
+ --cirth-line-height-normal: 1.5;
2494
+ --cirth-line-height-relaxed: 1.625;
2495
+ --cirth-line-height-loose: 2;
2496
+ --cirth-letter-spacing-tight: 0;
2497
+ --cirth-letter-spacing-normal: 0;
2498
+ --cirth-letter-spacing-wide: .025em;
2499
+ --cirth-space-0: 0;
2500
+ --cirth-space-1: .25rem;
2501
+ --cirth-space-2: .5rem;
2502
+ --cirth-space-3: .75rem;
2503
+ --cirth-space-4: 1rem;
2504
+ --cirth-space-5: 1.25rem;
2505
+ --cirth-space-6: 1.5rem;
2506
+ --cirth-space-8: 2rem;
2507
+ --cirth-space-10: 2.5rem;
2508
+ --cirth-space-12: 3rem;
2509
+ --cirth-space-16: 4rem;
2510
+ --cirth-space-20: 5rem;
2511
+ --cirth-space-24: 6rem;
2512
+ --cirth-size-0: 0;
2513
+ --cirth-size-1: .25rem;
2514
+ --cirth-size-2: .5rem;
2515
+ --cirth-size-3: .75rem;
2516
+ --cirth-size-4: 1rem;
2517
+ --cirth-size-5: 1.25rem;
2518
+ --cirth-size-6: 1.5rem;
2519
+ --cirth-size-8: 2rem;
2520
+ --cirth-size-10: 2.5rem;
2521
+ --cirth-size-12: 3rem;
2522
+ --cirth-size-16: 4rem;
2523
+ --cirth-size-20: 5rem;
2524
+ --cirth-size-24: 6rem;
2525
+ --cirth-radius-none: 0;
2526
+ --cirth-radius-xs: .125rem;
2527
+ --cirth-radius-sm: .25rem;
2528
+ --cirth-radius-md: .375rem;
2529
+ --cirth-radius-lg: .5rem;
2530
+ --cirth-radius-xl: .75rem;
2531
+ --cirth-radius-2xl: 1rem;
2532
+ --cirth-radius-pill: 9999px;
2533
+ --cirth-border-width-0: 0;
2534
+ --cirth-border-width-1: .0625rem;
2535
+ --cirth-border-width-2: .125rem;
2536
+ --cirth-border-width-4: .25rem;
2537
+ --cirth-outline-width-1: .0625rem;
2538
+ --cirth-outline-width-2: .125rem;
2539
+ --cirth-outline-width-4: .25rem;
2540
+ --cirth-shadow-none: none;
2541
+ --cirth-shadow-xs: 0 .0625rem .125rem rgba(0, 0, 0, .05);
2542
+ --cirth-shadow-sm: 0 .0625rem .1875rem rgba(0, 0, 0, .1),
2543
+ 0 .0625rem .125rem rgba(0, 0, 0, .06);
2544
+ --cirth-shadow-md: 0 .25rem .375rem rgba(0, 0, 0, .07),
2545
+ 0 .125rem .25rem rgba(0, 0, 0, .06);
2546
+ --cirth-shadow-lg: 0 .625rem .9375rem rgba(0, 0, 0, .1),
2547
+ 0 .25rem .375rem rgba(0, 0, 0, .05);
2548
+ --cirth-shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, .1),
2549
+ 0 .625rem .625rem rgba(0, 0, 0, .04);
2550
+ --cirth-shadow-inner: inset 0 .125rem .25rem rgba(0, 0, 0, .06);
2551
+ --cirth-duration-instant: 0s;
2552
+ --cirth-duration-fast: .1s;
2553
+ --cirth-duration-normal: .2s;
2554
+ --cirth-duration-slow: .3s;
2555
+ --cirth-duration-slower: .5s;
2556
+ --cirth-ease-linear: linear;
2557
+ --cirth-ease-in: cubic-bezier(.4, 0, 1, 1);
2558
+ --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
2559
+ --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
2560
+ --cirth-opacity-disabled: .5;
2561
+ --cirth-opacity-muted: .72;
2562
+ --cirth-opacity-overlay: .75;
2563
+ --cirth-z-index-dropdown: 1000;
2564
+ --cirth-z-index-sticky: 1020;
2565
+ --cirth-z-index-fixed: 1030;
2566
+ --cirth-z-index-modal-backdrop: 1040;
2567
+ --cirth-z-index-modal: 1050;
2568
+ --cirth-z-index-tooltip: 1070;
2569
+ --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2570
+ --cirth-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2571
+ "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
2572
+ --cirth-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
2573
+ monospace, var(--cirth-font-family-emoji);
2574
+ --cirth-font-family: var(--cirth-font-family-sans-serif);
2575
+ --cirth-line-height: var(--cirth-line-height-normal);
2576
+ --cirth-font-weight: var(--cirth-font-weight-regular);
2577
+ --cirth-font-size: 100%;
2578
+ --cirth-text-underline-offset: .1rem;
2579
+ --cirth-border-radius: var(--cirth-radius-sm);
2580
+ --cirth-border-width: var(--cirth-border-width-1);
2581
+ --cirth-outline-width: var(--cirth-outline-width-2);
2582
+ --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-in-out);
2583
+ --cirth-spacing: var(--cirth-space-4);
2584
+ --cirth-typography-spacing-vertical: var(--cirth-space-4);
2585
+ --cirth-block-spacing-vertical: var(--cirth-spacing);
2586
+ --cirth-block-spacing-horizontal: var(--cirth-spacing);
2587
+ --cirth-form-element-spacing-vertical: var(--cirth-space-3);
2588
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
2589
+ --cirth-form-label-font-weight: var(--cirth-font-weight);
2590
+ --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2591
+ --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
2592
+ var(--cirth-primary-focus);
2593
+ --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
2594
+ var(--cirth-form-element-border-color);
2595
+ --cirth-modal-overlay-backdrop-filter: blur(.375rem);
2596
+ --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
2597
+ --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
2598
+ --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
2599
+ --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
2600
+ --cirth-nav-breadcrumb-divider: ">";
2601
+ --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");
2602
+ --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");
2603
+ --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");
2604
+ --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");
2605
+ --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");
2606
+ --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");
2607
+ --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");
2608
+ --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");
2691
2609
  }
2692
2610
 
2693
- .cirth aside nav, .cirth aside ol, .cirth aside ul, .cirth aside li {
2694
- display: block;
2611
+ @media (width >= 576px) {
2612
+ .cirth {
2613
+ --cirth-font-size: 106.25%;
2614
+ }
2695
2615
  }
2696
2616
 
2697
- .cirth aside li {
2698
- padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) var(--cirth-nav-element-spacing-horizontal);
2617
+ @media (width >= 768px) {
2618
+ .cirth {
2619
+ --cirth-font-size: 112.5%;
2620
+ }
2699
2621
  }
2700
2622
 
2701
- .cirth aside li a {
2702
- display: block;
2623
+ @media (width >= 1024px) {
2624
+ .cirth {
2625
+ --cirth-font-size: 118.75%;
2626
+ }
2703
2627
  }
2704
2628
 
2705
- .cirth aside li [role="button"] {
2706
- margin: inherit;
2629
+ @media (width >= 1280px) {
2630
+ .cirth {
2631
+ --cirth-font-size: 125%;
2632
+ }
2707
2633
  }
2708
2634
 
2709
- [dir="rtl"] .cirth nav[aria-label="breadcrumb"] ul li:not(:last-child) :after {
2710
- content: "\\";
2635
+ @media (width >= 1536px) {
2636
+ .cirth {
2637
+ --cirth-font-size: 131.25%;
2638
+ }
2711
2639
  }
2712
2640
 
2713
- .cirth progress {
2714
- vertical-align: baseline;
2715
- appearance: none;
2716
- width: 100%;
2717
- height: .5rem;
2718
- margin-bottom: calc(var(--cirth-spacing) * .5);
2719
- border-radius: var(--cirth-border-radius);
2720
- background-color: var(--cirth-progress-background-color);
2721
- color: var(--cirth-progress-color);
2722
- border: 0;
2723
- display: inline-block;
2724
- overflow: hidden;
2641
+ .cirth a {
2642
+ --cirth-text-decoration: underline;
2725
2643
  }
2726
2644
 
2727
- .cirth progress::-webkit-progress-bar {
2728
- border-radius: var(--cirth-border-radius);
2729
- background: none;
2645
+ .cirth small {
2646
+ --cirth-font-size: .875em;
2730
2647
  }
2731
2648
 
2732
- .cirth progress[value]::-webkit-progress-value {
2733
- background-color: var(--cirth-progress-color);
2734
- transition: inline-size var(--cirth-transition);
2649
+ .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
2650
+ --cirth-font-weight: var(--cirth-font-weight-bold);
2735
2651
  }
2736
2652
 
2737
- .cirth progress::-moz-progress-bar {
2738
- background-color: var(--cirth-progress-color);
2653
+ .cirth h1 {
2654
+ --cirth-font-size: var(--cirth-font-size-5xl);
2655
+ --cirth-line-height: var(--cirth-line-height-tight);
2656
+ --cirth-typography-spacing-top: var(--cirth-space-12);
2739
2657
  }
2740
2658
 
2741
- @media (prefers-reduced-motion: no-preference) {
2742
- .cirth progress:indeterminate {
2743
- 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;
2744
- animation: 1s linear infinite progress-indeterminate;
2745
- }
2659
+ .cirth h2 {
2660
+ --cirth-font-size: 1.75rem;
2661
+ --cirth-line-height: 1.15;
2662
+ --cirth-typography-spacing-top: 2.625rem;
2663
+ }
2746
2664
 
2747
- .cirth progress:indeterminate[value]::-webkit-progress-value {
2748
- background-color: rgba(0, 0, 0, 0);
2749
- }
2665
+ .cirth h3 {
2666
+ --cirth-font-size: 1.5rem;
2667
+ --cirth-line-height: 1.175;
2668
+ --cirth-typography-spacing-top: 2.25rem;
2669
+ }
2750
2670
 
2751
- .cirth progress:indeterminate::-moz-progress-bar {
2752
- background-color: rgba(0, 0, 0, 0);
2753
- }
2671
+ .cirth h4 {
2672
+ --cirth-font-size: var(--cirth-font-size-xl);
2673
+ --cirth-line-height: 1.2;
2674
+ --cirth-typography-spacing-top: 1.874rem;
2675
+ }
2754
2676
 
2755
- [dir="rtl"] .cirth progress:indeterminate {
2756
- animation-direction: reverse;
2757
- }
2677
+ .cirth h5 {
2678
+ --cirth-font-size: var(--cirth-font-size-lg);
2679
+ --cirth-line-height: 1.225;
2680
+ --cirth-typography-spacing-top: 1.6875rem;
2758
2681
  }
2759
2682
 
2760
- @keyframes progress-indeterminate {
2761
- 0% {
2762
- background-position: 200% 0;
2763
- }
2683
+ .cirth h6 {
2684
+ --cirth-font-size: var(--cirth-font-size-md);
2685
+ --cirth-line-height: var(--cirth-line-height-snug);
2686
+ --cirth-typography-spacing-top: var(--cirth-space-6);
2687
+ }
2764
2688
 
2765
- 100% {
2766
- background-position: -200% 0;
2767
- }
2689
+ .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
2690
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2691
+ --cirth-border-width: .1875rem;
2768
2692
  }
2769
2693
 
2770
- .cirth [data-tooltip] {
2771
- position: relative;
2694
+ .cirth pre, .cirth code, .cirth kbd, .cirth samp {
2695
+ --cirth-font-family: var(--cirth-font-family-monospace);
2772
2696
  }
2773
2697
 
2774
- .cirth [data-tooltip]:not(:is(a, button, input, [role="button"])) {
2775
- cursor: help;
2776
- border-bottom: 1px dotted;
2777
- text-decoration: none;
2698
+ .cirth kbd {
2699
+ --cirth-font-weight: bolder;
2778
2700
  }
2779
2701
 
2780
- .cirth [data-tooltip][data-placement="top"]:before, .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:before, .cirth [data-tooltip]:after {
2781
- z-index: 99;
2782
- border-radius: var(--cirth-border-radius);
2783
- background: var(--cirth-tooltip-background-color);
2784
- content: attr(data-tooltip);
2785
- color: var(--cirth-tooltip-color);
2786
- font-style: normal;
2787
- font-weight: var(--cirth-font-weight);
2788
- text-overflow: ellipsis;
2789
- white-space: nowrap;
2790
- opacity: 0;
2791
- pointer-events: none;
2792
- padding: .25rem .5rem;
2793
- font-size: .875rem;
2794
- text-decoration: none;
2795
- display: block;
2796
- position: absolute;
2797
- bottom: 100%;
2798
- left: 50%;
2799
- overflow: hidden;
2800
- transform: translate(-50%, -.25rem);
2702
+ .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
2703
+ --cirth-outline-width: var(--cirth-outline-width-1);
2801
2704
  }
2802
2705
 
2803
- .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
2804
- content: "";
2805
- color: var(--cirth-tooltip-background-color);
2806
- background-color: rgba(0, 0, 0, 0);
2807
- border-top: .3rem solid;
2808
- border-left: .3rem solid rgba(0, 0, 0, 0);
2809
- border-right: .3rem solid rgba(0, 0, 0, 0);
2810
- border-radius: 0;
2811
- padding: 0;
2812
- transform: translate(-50%);
2706
+ .cirth :where(select, textarea) {
2707
+ --cirth-outline-width: var(--cirth-outline-width-1);
2813
2708
  }
2814
2709
 
2815
- .cirth [data-tooltip][data-placement="bottom"]:before, .cirth [data-tooltip][data-placement="bottom"]:after {
2816
- top: 100%;
2817
- bottom: auto;
2818
- transform: translate(-50%, .25rem);
2710
+ .cirth [type="search"] {
2711
+ --cirth-border-radius: var(--cirth-radius-pill);
2819
2712
  }
2820
2713
 
2821
- .cirth [data-tooltip][data-placement="bottom"]:after {
2822
- border: .3rem solid rgba(0, 0, 0, 0);
2823
- border-bottom-color: currentColor;
2824
- transform: translate(-50%, -.3rem);
2714
+ .cirth [type="checkbox"] {
2715
+ --cirth-border-width: var(--cirth-border-width-2);
2825
2716
  }
2826
2717
 
2827
- .cirth [data-tooltip][data-placement="left"]:before, .cirth [data-tooltip][data-placement="left"]:after {
2828
- inset: 50% 100% auto auto;
2829
- transform: translate(-.25rem, -50%);
2718
+ .cirth [type="radio"] {
2719
+ --cirth-border-width: var(--cirth-border-width-2);
2830
2720
  }
2831
2721
 
2832
- .cirth [data-tooltip][data-placement="left"]:after {
2833
- border: .3rem solid rgba(0, 0, 0, 0);
2834
- border-left-color: currentColor;
2835
- transform: translate(.3rem, -50%);
2722
+ .cirth [type="checkbox"][role="switch"] {
2723
+ --cirth-border-width: .1875rem;
2836
2724
  }
2837
2725
 
2838
- .cirth [data-tooltip][data-placement="right"]:before, .cirth [data-tooltip][data-placement="right"]:after {
2839
- inset: 50% auto auto 100%;
2840
- transform: translate(.25rem, -50%);
2726
+ .cirth [role="search"] {
2727
+ --cirth-border-radius: var(--cirth-radius-pill);
2841
2728
  }
2842
2729
 
2843
- .cirth [data-tooltip][data-placement="right"]:after {
2844
- border: .3rem solid rgba(0, 0, 0, 0);
2845
- border-right-color: currentColor;
2846
- transform: translate(-.3rem, -50%);
2730
+ .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
2731
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2847
2732
  }
2848
2733
 
2849
- .cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
2850
- opacity: 1;
2734
+ .cirth [role="search"] [type="submit"] {
2735
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2851
2736
  }
2852
2737
 
2853
- @media (hover: hover) and (pointer: fine) {
2854
- .cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
2855
- --cirth-tooltip-slide-to: translate(-50%, -.25rem);
2856
- opacity: 0;
2857
- animation-name: tooltip-slide;
2858
- animation-duration: .2s;
2859
- animation-fill-mode: forwards;
2860
- transform: translate(-50%, .75rem);
2861
- }
2738
+ .cirth [role="search"] [type="button"] {
2739
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2740
+ }
2862
2741
 
2863
- .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:after {
2864
- --cirth-tooltip-caret-slide-to: translate(-50%, 0rem);
2865
- animation-name: tooltip-caret-slide;
2866
- transform: translate(-50%, -.25rem);
2867
- }
2742
+ .cirth [role="group"] [type="submit"] {
2743
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2744
+ }
2868
2745
 
2869
- .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 {
2870
- --cirth-tooltip-slide-to: translate(-50%, .25rem);
2871
- animation-name: tooltip-slide;
2872
- transform: translate(-50%, -.75rem);
2873
- }
2746
+ .cirth [role="group"] [type="button"] {
2747
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2748
+ }
2874
2749
 
2875
- .cirth [data-tooltip][data-placement="bottom"]:focus:after, .cirth [data-tooltip][data-placement="bottom"]:hover:after {
2876
- --cirth-tooltip-caret-slide-to: translate(-50%, -.3rem);
2877
- animation-name: tooltip-caret-slide;
2878
- transform: translate(-50%, -.5rem);
2879
- }
2750
+ .cirth details summary[role="button"]:after {
2751
+ filter: brightness(0) invert();
2752
+ }
2880
2753
 
2881
- .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 {
2882
- --cirth-tooltip-slide-to: translate(-.25rem, -50%);
2883
- animation-name: tooltip-slide;
2884
- transform: translate(.75rem, -50%);
2885
- }
2754
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea)):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):before {
2755
+ filter: brightness(0) invert();
2756
+ }
2886
2757
 
2887
- .cirth [data-tooltip][data-placement="left"]:focus:after, .cirth [data-tooltip][data-placement="left"]:hover:after {
2888
- --cirth-tooltip-caret-slide-to: translate(.3rem, -50%);
2889
- animation-name: tooltip-caret-slide;
2890
- transform: translate(.05rem, -50%);
2891
- }
2758
+ .cirth[data-theme="light"], .cirth [data-theme="light"], .cirth:not([data-theme="dark"]) {
2759
+ --lightningcss-light: initial;
2760
+ --lightningcss-dark: ;
2761
+ color-scheme: light;
2762
+ --cirth-background-color: #fff;
2763
+ --cirth-color: #373c44;
2764
+ --cirth-text-selection-color: rgba(2, 154, 232, .25);
2765
+ --cirth-muted-color: #646b79;
2766
+ --cirth-muted-border-color: #e7eaf0;
2767
+ --cirth-primary: #0172ad;
2768
+ --cirth-primary-background: #0172ad;
2769
+ --cirth-primary-border: var(--cirth-primary-background);
2770
+ --cirth-primary-underline: rgba(1, 114, 173, .5);
2771
+ --cirth-primary-hover: #015887;
2772
+ --cirth-primary-hover-background: #02659a;
2773
+ --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2774
+ --cirth-primary-hover-underline: var(--cirth-primary-hover);
2775
+ --cirth-primary-focus: rgba(2, 154, 232, .5);
2776
+ --cirth-primary-inverse: #fff;
2777
+ --cirth-secondary: #5d6b89;
2778
+ --cirth-secondary-background: #525f7a;
2779
+ --cirth-secondary-border: var(--cirth-secondary-background);
2780
+ --cirth-secondary-underline: rgba(93, 107, 137, .5);
2781
+ --cirth-secondary-hover: #48536b;
2782
+ --cirth-secondary-hover-background: #48536b;
2783
+ --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2784
+ --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2785
+ --cirth-secondary-focus: rgba(93, 107, 137, .25);
2786
+ --cirth-secondary-inverse: #fff;
2787
+ --cirth-contrast: #181c25;
2788
+ --cirth-contrast-background: #181c25;
2789
+ --cirth-contrast-border: var(--cirth-contrast-background);
2790
+ --cirth-contrast-underline: rgba(24, 28, 37, .5);
2791
+ --cirth-contrast-hover: #000;
2792
+ --cirth-contrast-hover-background: #000;
2793
+ --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2794
+ --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2795
+ --cirth-contrast-focus: rgba(93, 107, 137, .25);
2796
+ --cirth-contrast-inverse: #fff;
2797
+ --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);
2798
+ --cirth-h1-color: #2d3138;
2799
+ --cirth-h2-color: #373c44;
2800
+ --cirth-h3-color: #424751;
2801
+ --cirth-h4-color: #4d535e;
2802
+ --cirth-h5-color: #5c6370;
2803
+ --cirth-h6-color: #646b79;
2804
+ --cirth-mark-background-color: #fde7c0;
2805
+ --cirth-mark-color: #0f1114;
2806
+ --cirth-ins-color: #1d6a54;
2807
+ --cirth-del-color: #883935;
2808
+ --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2809
+ --cirth-blockquote-footer-color: var(--cirth-muted-color);
2810
+ --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2811
+ --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2812
+ --cirth-table-border-color: var(--cirth-muted-border-color);
2813
+ --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
2814
+ --cirth-code-background-color: #f3f5f7;
2815
+ --cirth-code-color: #646b79;
2816
+ --cirth-code-kbd-background-color: var(--cirth-color);
2817
+ --cirth-code-kbd-color: var(--cirth-background-color);
2818
+ --cirth-form-element-background-color: #fbfcfc;
2819
+ --cirth-form-element-selected-background-color: #dfe3eb;
2820
+ --cirth-form-element-border-color: #cfd5e2;
2821
+ --cirth-form-element-color: #23262c;
2822
+ --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2823
+ --cirth-form-element-active-background-color: #fff;
2824
+ --cirth-form-element-active-border-color: var(--cirth-primary-border);
2825
+ --cirth-form-element-focus-color: var(--cirth-primary-border);
2826
+ --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2827
+ --cirth-form-element-invalid-border-color: #b86a6b;
2828
+ --cirth-form-element-invalid-active-border-color: #c84f48;
2829
+ --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2830
+ --cirth-form-element-valid-border-color: #4c9b8a;
2831
+ --cirth-form-element-valid-active-border-color: #279977;
2832
+ --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2833
+ --cirth-switch-background-color: #bfc7d9;
2834
+ --cirth-switch-checked-background-color: var(--cirth-primary-background);
2835
+ --cirth-switch-color: #fff;
2836
+ --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2837
+ --cirth-range-border-color: #dfe3eb;
2838
+ --cirth-range-active-border-color: #bfc7d9;
2839
+ --cirth-range-thumb-border-color: var(--cirth-background-color);
2840
+ --cirth-range-thumb-color: var(--cirth-secondary-background);
2841
+ --cirth-range-thumb-active-color: var(--cirth-primary-background);
2842
+ --cirth-accordion-border-color: var(--cirth-muted-border-color);
2843
+ --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2844
+ --cirth-accordion-close-summary-color: var(--cirth-color);
2845
+ --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2846
+ --cirth-card-background-color: var(--cirth-background-color);
2847
+ --cirth-card-border-color: var(--cirth-muted-border-color);
2848
+ --cirth-card-box-shadow: var(--cirth-box-shadow);
2849
+ --cirth-card-sectioning-background-color: #fbfcfc;
2850
+ --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2851
+ --cirth-modal-overlay-background-color: rgba(232, 234, 237, var(--cirth-opacity-overlay));
2852
+ --cirth-progress-background-color: #dfe3eb;
2853
+ --cirth-progress-color: var(--cirth-primary-background);
2854
+ --cirth-tooltip-background-color: var(--cirth-contrast-background);
2855
+ --cirth-tooltip-color: var(--cirth-contrast-inverse);
2856
+ --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");
2857
+ --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");
2858
+ }
2892
2859
 
2893
- .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 {
2894
- --cirth-tooltip-slide-to: translate(.25rem, -50%);
2895
- animation-name: tooltip-slide;
2896
- transform: translate(-.75rem, -50%);
2897
- }
2860
+ .cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2861
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2862
+ }
2898
2863
 
2899
- .cirth [data-tooltip][data-placement="right"]:focus:after, .cirth [data-tooltip][data-placement="right"]:hover:after {
2900
- --cirth-tooltip-caret-slide-to: translate(-.3rem, -50%);
2901
- animation-name: tooltip-caret-slide;
2902
- transform: translate(-.05rem, -50%);
2903
- }
2864
+ .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2865
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2904
2866
  }
2905
2867
 
2906
- @keyframes tooltip-slide {
2907
- to {
2908
- transform: var(--cirth-tooltip-slide-to);
2909
- opacity: 1;
2910
- }
2868
+ .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2869
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2911
2870
  }
2912
2871
 
2913
- @keyframes tooltip-caret-slide {
2914
- 50% {
2915
- opacity: 0;
2872
+ @media only screen and (prefers-color-scheme: dark) {
2873
+ .cirth:not([data-theme]) {
2874
+ --lightningcss-light: ;
2875
+ --lightningcss-dark: initial;
2876
+ color-scheme: dark;
2877
+ --cirth-background-color: #13171f;
2878
+ --cirth-color: #c2c7d0;
2879
+ --cirth-text-selection-color: rgba(1, 170, 255, .19);
2880
+ --cirth-muted-color: #7b8495;
2881
+ --cirth-muted-border-color: #202632;
2882
+ --cirth-primary: #01aaff;
2883
+ --cirth-primary-background: #0172ad;
2884
+ --cirth-primary-border: var(--cirth-primary-background);
2885
+ --cirth-primary-underline: rgba(1, 170, 255, .5);
2886
+ --cirth-primary-hover: #79c0ff;
2887
+ --cirth-primary-hover-background: #017fc0;
2888
+ --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2889
+ --cirth-primary-hover-underline: var(--cirth-primary-hover);
2890
+ --cirth-primary-focus: rgba(1, 170, 255, .376);
2891
+ --cirth-primary-inverse: #fff;
2892
+ --cirth-secondary: #969eaf;
2893
+ --cirth-secondary-background: #525f7a;
2894
+ --cirth-secondary-border: var(--cirth-secondary-background);
2895
+ --cirth-secondary-underline: rgba(150, 158, 175, .5);
2896
+ --cirth-secondary-hover: #b3b9c5;
2897
+ --cirth-secondary-hover-background: #5d6b89;
2898
+ --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2899
+ --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2900
+ --cirth-secondary-focus: rgba(144, 158, 190, .25);
2901
+ --cirth-secondary-inverse: #fff;
2902
+ --cirth-contrast: #dfe3eb;
2903
+ --cirth-contrast-background: #eff1f4;
2904
+ --cirth-contrast-border: var(--cirth-contrast-background);
2905
+ --cirth-contrast-underline: rgba(223, 227, 235, .5);
2906
+ --cirth-contrast-hover: #fff;
2907
+ --cirth-contrast-hover-background: #fff;
2908
+ --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2909
+ --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2910
+ --cirth-contrast-focus: rgba(207, 213, 226, .25);
2911
+ --cirth-contrast-inverse: #000;
2912
+ --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);
2913
+ --cirth-h1-color: #f0f1f3;
2914
+ --cirth-h2-color: #e0e3e7;
2915
+ --cirth-h3-color: #c2c7d0;
2916
+ --cirth-h4-color: #b3b9c5;
2917
+ --cirth-h5-color: #a4acba;
2918
+ --cirth-h6-color: #8891a4;
2919
+ --cirth-mark-background-color: #014063;
2920
+ --cirth-mark-color: #fff;
2921
+ --cirth-ins-color: #62af9a;
2922
+ --cirth-del-color: #ce7e7b;
2923
+ --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2924
+ --cirth-blockquote-footer-color: var(--cirth-muted-color);
2925
+ --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2926
+ --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2927
+ --cirth-table-border-color: var(--cirth-muted-border-color);
2928
+ --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
2929
+ --cirth-code-background-color: #1a1f28;
2930
+ --cirth-code-color: #8891a4;
2931
+ --cirth-code-kbd-background-color: var(--cirth-color);
2932
+ --cirth-code-kbd-color: var(--cirth-background-color);
2933
+ --cirth-form-element-background-color: #1c212c;
2934
+ --cirth-form-element-selected-background-color: #2a3140;
2935
+ --cirth-form-element-border-color: #2a3140;
2936
+ --cirth-form-element-color: #e0e3e7;
2937
+ --cirth-form-element-placeholder-color: #8891a4;
2938
+ --cirth-form-element-active-background-color: #1a1f28;
2939
+ --cirth-form-element-active-border-color: var(--cirth-primary-border);
2940
+ --cirth-form-element-focus-color: var(--cirth-primary-border);
2941
+ --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2942
+ --cirth-form-element-invalid-border-color: #964a50;
2943
+ --cirth-form-element-invalid-active-border-color: #b7403b;
2944
+ --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2945
+ --cirth-form-element-valid-border-color: #2a7b6f;
2946
+ --cirth-form-element-valid-active-border-color: #16896a;
2947
+ --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2948
+ --cirth-switch-background-color: #333c4e;
2949
+ --cirth-switch-checked-background-color: var(--cirth-primary-background);
2950
+ --cirth-switch-color: #fff;
2951
+ --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2952
+ --cirth-range-border-color: #202632;
2953
+ --cirth-range-active-border-color: #2a3140;
2954
+ --cirth-range-thumb-border-color: var(--cirth-background-color);
2955
+ --cirth-range-thumb-color: var(--cirth-secondary-background);
2956
+ --cirth-range-thumb-active-color: var(--cirth-primary-background);
2957
+ --cirth-accordion-border-color: var(--cirth-muted-border-color);
2958
+ --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2959
+ --cirth-accordion-close-summary-color: var(--cirth-color);
2960
+ --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2961
+ --cirth-card-background-color: #181c25;
2962
+ --cirth-card-border-color: var(--cirth-card-background-color);
2963
+ --cirth-card-box-shadow: var(--cirth-box-shadow);
2964
+ --cirth-card-sectioning-background-color: #1a1f28;
2965
+ --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2966
+ --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
2967
+ --cirth-progress-background-color: #202632;
2968
+ --cirth-progress-color: var(--cirth-primary-background);
2969
+ --cirth-tooltip-background-color: var(--cirth-contrast-background);
2970
+ --cirth-tooltip-color: var(--cirth-contrast-inverse);
2971
+ --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");
2972
+ --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");
2916
2973
  }
2917
2974
 
2918
- to {
2919
- transform: var(--cirth-tooltip-caret-slide-to);
2920
- opacity: 1;
2975
+ .cirth:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2976
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2921
2977
  }
2922
2978
  }
2923
2979
 
2924
- .cirth [aria-controls] {
2925
- cursor: pointer;
2980
+ .cirth[data-theme="dark"], .cirth [data-theme="dark"] {
2981
+ --lightningcss-light: ;
2982
+ --lightningcss-dark: initial;
2983
+ color-scheme: dark;
2984
+ --cirth-background-color: #13171f;
2985
+ --cirth-color: #c2c7d0;
2986
+ --cirth-text-selection-color: rgba(1, 170, 255, .19);
2987
+ --cirth-muted-color: #7b8495;
2988
+ --cirth-muted-border-color: #202632;
2989
+ --cirth-primary: #01aaff;
2990
+ --cirth-primary-background: #0172ad;
2991
+ --cirth-primary-border: var(--cirth-primary-background);
2992
+ --cirth-primary-underline: rgba(1, 170, 255, .5);
2993
+ --cirth-primary-hover: #79c0ff;
2994
+ --cirth-primary-hover-background: #017fc0;
2995
+ --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2996
+ --cirth-primary-hover-underline: var(--cirth-primary-hover);
2997
+ --cirth-primary-focus: rgba(1, 170, 255, .376);
2998
+ --cirth-primary-inverse: #fff;
2999
+ --cirth-secondary: #969eaf;
3000
+ --cirth-secondary-background: #525f7a;
3001
+ --cirth-secondary-border: var(--cirth-secondary-background);
3002
+ --cirth-secondary-underline: rgba(150, 158, 175, .5);
3003
+ --cirth-secondary-hover: #b3b9c5;
3004
+ --cirth-secondary-hover-background: #5d6b89;
3005
+ --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3006
+ --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3007
+ --cirth-secondary-focus: rgba(144, 158, 190, .25);
3008
+ --cirth-secondary-inverse: #fff;
3009
+ --cirth-contrast: #dfe3eb;
3010
+ --cirth-contrast-background: #eff1f4;
3011
+ --cirth-contrast-border: var(--cirth-contrast-background);
3012
+ --cirth-contrast-underline: rgba(223, 227, 235, .5);
3013
+ --cirth-contrast-hover: #fff;
3014
+ --cirth-contrast-hover-background: #fff;
3015
+ --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3016
+ --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3017
+ --cirth-contrast-focus: rgba(207, 213, 226, .25);
3018
+ --cirth-contrast-inverse: #000;
3019
+ --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);
3020
+ --cirth-h1-color: #f0f1f3;
3021
+ --cirth-h2-color: #e0e3e7;
3022
+ --cirth-h3-color: #c2c7d0;
3023
+ --cirth-h4-color: #b3b9c5;
3024
+ --cirth-h5-color: #a4acba;
3025
+ --cirth-h6-color: #8891a4;
3026
+ --cirth-mark-background-color: #014063;
3027
+ --cirth-mark-color: #fff;
3028
+ --cirth-ins-color: #62af9a;
3029
+ --cirth-del-color: #ce7e7b;
3030
+ --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3031
+ --cirth-blockquote-footer-color: var(--cirth-muted-color);
3032
+ --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3033
+ --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3034
+ --cirth-table-border-color: var(--cirth-muted-border-color);
3035
+ --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3036
+ --cirth-code-background-color: #1a1f28;
3037
+ --cirth-code-color: #8891a4;
3038
+ --cirth-code-kbd-background-color: var(--cirth-color);
3039
+ --cirth-code-kbd-color: var(--cirth-background-color);
3040
+ --cirth-form-element-background-color: #1c212c;
3041
+ --cirth-form-element-selected-background-color: #2a3140;
3042
+ --cirth-form-element-border-color: #2a3140;
3043
+ --cirth-form-element-color: #e0e3e7;
3044
+ --cirth-form-element-placeholder-color: #8891a4;
3045
+ --cirth-form-element-active-background-color: #1a1f28;
3046
+ --cirth-form-element-active-border-color: var(--cirth-primary-border);
3047
+ --cirth-form-element-focus-color: var(--cirth-primary-border);
3048
+ --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3049
+ --cirth-form-element-invalid-border-color: #964a50;
3050
+ --cirth-form-element-invalid-active-border-color: #b7403b;
3051
+ --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3052
+ --cirth-form-element-valid-border-color: #2a7b6f;
3053
+ --cirth-form-element-valid-active-border-color: #16896a;
3054
+ --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3055
+ --cirth-switch-background-color: #333c4e;
3056
+ --cirth-switch-checked-background-color: var(--cirth-primary-background);
3057
+ --cirth-switch-color: #fff;
3058
+ --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3059
+ --cirth-range-border-color: #202632;
3060
+ --cirth-range-active-border-color: #2a3140;
3061
+ --cirth-range-thumb-border-color: var(--cirth-background-color);
3062
+ --cirth-range-thumb-color: var(--cirth-secondary-background);
3063
+ --cirth-range-thumb-active-color: var(--cirth-primary-background);
3064
+ --cirth-accordion-border-color: var(--cirth-muted-border-color);
3065
+ --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3066
+ --cirth-accordion-close-summary-color: var(--cirth-color);
3067
+ --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3068
+ --cirth-card-background-color: #181c25;
3069
+ --cirth-card-border-color: var(--cirth-card-background-color);
3070
+ --cirth-card-box-shadow: var(--cirth-box-shadow);
3071
+ --cirth-card-sectioning-background-color: #1a1f28;
3072
+ --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3073
+ --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3074
+ --cirth-progress-background-color: #202632;
3075
+ --cirth-progress-color: var(--cirth-primary-background);
3076
+ --cirth-tooltip-background-color: var(--cirth-contrast-background);
3077
+ --cirth-tooltip-color: var(--cirth-contrast-inverse);
3078
+ --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");
3079
+ --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");
2926
3080
  }
2927
3081
 
2928
- .cirth [aria-disabled="true"], .cirth [disabled] {
2929
- cursor: not-allowed;
3082
+ .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3083
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2930
3084
  }
2931
3085
 
2932
- .cirth [aria-hidden="false"][hidden] {
2933
- display: initial;
3086
+ .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3087
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2934
3088
  }
2935
3089
 
2936
- .cirth [aria-hidden="false"][hidden]:not(:focus) {
2937
- clip: rect(0, 0, 0, 0);
2938
- position: absolute;
3090
+ .cirth progress {
3091
+ accent-color: var(--cirth-primary);
2939
3092
  }
2940
3093
 
2941
- .cirth a, .cirth area, .cirth button, .cirth input, .cirth label, .cirth select, .cirth summary, .cirth textarea, .cirth [tabindex] {
2942
- -ms-touch-action: manipulation;
3094
+ .cirth [type="checkbox"] {
3095
+ accent-color: var(--cirth-primary);
2943
3096
  }
2944
3097
 
2945
- .cirth [dir="rtl"] {
2946
- direction: rtl;
3098
+ .cirth [type="radio"] {
3099
+ accent-color: var(--cirth-primary);
2947
3100
  }
2948
3101
 
2949
- @media (prefers-reduced-motion: reduce) {
2950
- .cirth :not([aria-busy="true"]), .cirth :not([aria-busy="true"]):before, .cirth :not([aria-busy="true"]):after {
2951
- background-attachment: initial !important;
2952
- scroll-behavior: auto !important;
2953
- transition-duration: 0s !important;
2954
- transition-delay: 0s !important;
2955
- animation-duration: 1ms !important;
2956
- animation-iteration-count: 1 !important;
2957
- animation-delay: -1ms !important;
2958
- }
3102
+ .cirth [type="range"] {
3103
+ accent-color: var(--cirth-primary);
2959
3104
  }