@cirthcss/cirth 0.2.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 (163) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +207 -0
  3. package/dist/cirth.amber.css +3747 -0
  4. package/dist/cirth.amber.min.css +1 -0
  5. package/dist/cirth.blue.css +3747 -0
  6. package/dist/cirth.blue.min.css +1 -0
  7. package/dist/cirth.classless.amber.css +3245 -0
  8. package/dist/cirth.classless.amber.min.css +1 -0
  9. package/dist/cirth.classless.blue.css +3245 -0
  10. package/dist/cirth.classless.blue.min.css +1 -0
  11. package/dist/cirth.classless.css +3245 -0
  12. package/dist/cirth.classless.cyan.css +3245 -0
  13. package/dist/cirth.classless.cyan.min.css +1 -0
  14. package/dist/cirth.classless.fuchsia.css +3245 -0
  15. package/dist/cirth.classless.fuchsia.min.css +1 -0
  16. package/dist/cirth.classless.green.css +3245 -0
  17. package/dist/cirth.classless.green.min.css +1 -0
  18. package/dist/cirth.classless.grey.css +3245 -0
  19. package/dist/cirth.classless.grey.min.css +1 -0
  20. package/dist/cirth.classless.indigo.css +3245 -0
  21. package/dist/cirth.classless.indigo.min.css +1 -0
  22. package/dist/cirth.classless.jade.css +3245 -0
  23. package/dist/cirth.classless.jade.min.css +1 -0
  24. package/dist/cirth.classless.lime.css +3245 -0
  25. package/dist/cirth.classless.lime.min.css +1 -0
  26. package/dist/cirth.classless.min.css +1 -0
  27. package/dist/cirth.classless.orange.css +3245 -0
  28. package/dist/cirth.classless.orange.min.css +1 -0
  29. package/dist/cirth.classless.pink.css +3245 -0
  30. package/dist/cirth.classless.pink.min.css +1 -0
  31. package/dist/cirth.classless.pumpkin.css +3245 -0
  32. package/dist/cirth.classless.pumpkin.min.css +1 -0
  33. package/dist/cirth.classless.purple.css +3245 -0
  34. package/dist/cirth.classless.purple.min.css +1 -0
  35. package/dist/cirth.classless.red.css +3245 -0
  36. package/dist/cirth.classless.red.min.css +1 -0
  37. package/dist/cirth.classless.sand.css +3245 -0
  38. package/dist/cirth.classless.sand.min.css +1 -0
  39. package/dist/cirth.classless.scoped.amber.css +2959 -0
  40. package/dist/cirth.classless.scoped.amber.min.css +1 -0
  41. package/dist/cirth.classless.scoped.blue.css +2959 -0
  42. package/dist/cirth.classless.scoped.blue.min.css +1 -0
  43. package/dist/cirth.classless.scoped.css +2959 -0
  44. package/dist/cirth.classless.scoped.cyan.css +2959 -0
  45. package/dist/cirth.classless.scoped.cyan.min.css +1 -0
  46. package/dist/cirth.classless.scoped.fuchsia.css +2959 -0
  47. package/dist/cirth.classless.scoped.fuchsia.min.css +1 -0
  48. package/dist/cirth.classless.scoped.green.css +2959 -0
  49. package/dist/cirth.classless.scoped.green.min.css +1 -0
  50. package/dist/cirth.classless.scoped.grey.css +2959 -0
  51. package/dist/cirth.classless.scoped.grey.min.css +1 -0
  52. package/dist/cirth.classless.scoped.indigo.css +2959 -0
  53. package/dist/cirth.classless.scoped.indigo.min.css +1 -0
  54. package/dist/cirth.classless.scoped.jade.css +2959 -0
  55. package/dist/cirth.classless.scoped.jade.min.css +1 -0
  56. package/dist/cirth.classless.scoped.lime.css +2959 -0
  57. package/dist/cirth.classless.scoped.lime.min.css +1 -0
  58. package/dist/cirth.classless.scoped.min.css +1 -0
  59. package/dist/cirth.classless.scoped.orange.css +2959 -0
  60. package/dist/cirth.classless.scoped.orange.min.css +1 -0
  61. package/dist/cirth.classless.scoped.pink.css +2959 -0
  62. package/dist/cirth.classless.scoped.pink.min.css +1 -0
  63. package/dist/cirth.classless.scoped.pumpkin.css +2959 -0
  64. package/dist/cirth.classless.scoped.pumpkin.min.css +1 -0
  65. package/dist/cirth.classless.scoped.purple.css +2959 -0
  66. package/dist/cirth.classless.scoped.purple.min.css +1 -0
  67. package/dist/cirth.classless.scoped.red.css +2959 -0
  68. package/dist/cirth.classless.scoped.red.min.css +1 -0
  69. package/dist/cirth.classless.scoped.sand.css +2959 -0
  70. package/dist/cirth.classless.scoped.sand.min.css +1 -0
  71. package/dist/cirth.classless.scoped.slate.css +2959 -0
  72. package/dist/cirth.classless.scoped.slate.min.css +1 -0
  73. package/dist/cirth.classless.scoped.violet.css +2959 -0
  74. package/dist/cirth.classless.scoped.violet.min.css +1 -0
  75. package/dist/cirth.classless.scoped.yellow.css +2959 -0
  76. package/dist/cirth.classless.scoped.yellow.min.css +1 -0
  77. package/dist/cirth.classless.scoped.zinc.css +2959 -0
  78. package/dist/cirth.classless.scoped.zinc.min.css +1 -0
  79. package/dist/cirth.classless.slate.css +3245 -0
  80. package/dist/cirth.classless.slate.min.css +1 -0
  81. package/dist/cirth.classless.violet.css +3245 -0
  82. package/dist/cirth.classless.violet.min.css +1 -0
  83. package/dist/cirth.classless.yellow.css +3245 -0
  84. package/dist/cirth.classless.yellow.min.css +1 -0
  85. package/dist/cirth.classless.zinc.css +3245 -0
  86. package/dist/cirth.classless.zinc.min.css +1 -0
  87. package/dist/cirth.css +3747 -0
  88. package/dist/cirth.cyan.css +3747 -0
  89. package/dist/cirth.cyan.min.css +1 -0
  90. package/dist/cirth.fuchsia.css +3747 -0
  91. package/dist/cirth.fuchsia.min.css +1 -0
  92. package/dist/cirth.green.css +3747 -0
  93. package/dist/cirth.green.min.css +1 -0
  94. package/dist/cirth.grey.css +3747 -0
  95. package/dist/cirth.grey.min.css +1 -0
  96. package/dist/cirth.indigo.css +3747 -0
  97. package/dist/cirth.indigo.min.css +1 -0
  98. package/dist/cirth.jade.css +3747 -0
  99. package/dist/cirth.jade.min.css +1 -0
  100. package/dist/cirth.lime.css +3747 -0
  101. package/dist/cirth.lime.min.css +1 -0
  102. package/dist/cirth.min.css +1 -0
  103. package/dist/cirth.orange.css +3747 -0
  104. package/dist/cirth.orange.min.css +1 -0
  105. package/dist/cirth.pink.css +3747 -0
  106. package/dist/cirth.pink.min.css +1 -0
  107. package/dist/cirth.pumpkin.css +3747 -0
  108. package/dist/cirth.pumpkin.min.css +1 -0
  109. package/dist/cirth.purple.css +3747 -0
  110. package/dist/cirth.purple.min.css +1 -0
  111. package/dist/cirth.red.css +3747 -0
  112. package/dist/cirth.red.min.css +1 -0
  113. package/dist/cirth.sand.css +3747 -0
  114. package/dist/cirth.sand.min.css +1 -0
  115. package/dist/cirth.scoped.amber.css +3467 -0
  116. package/dist/cirth.scoped.amber.min.css +1 -0
  117. package/dist/cirth.scoped.blue.css +3467 -0
  118. package/dist/cirth.scoped.blue.min.css +1 -0
  119. package/dist/cirth.scoped.css +3467 -0
  120. package/dist/cirth.scoped.cyan.css +3467 -0
  121. package/dist/cirth.scoped.cyan.min.css +1 -0
  122. package/dist/cirth.scoped.fuchsia.css +3467 -0
  123. package/dist/cirth.scoped.fuchsia.min.css +1 -0
  124. package/dist/cirth.scoped.green.css +3467 -0
  125. package/dist/cirth.scoped.green.min.css +1 -0
  126. package/dist/cirth.scoped.grey.css +3467 -0
  127. package/dist/cirth.scoped.grey.min.css +1 -0
  128. package/dist/cirth.scoped.indigo.css +3467 -0
  129. package/dist/cirth.scoped.indigo.min.css +1 -0
  130. package/dist/cirth.scoped.jade.css +3467 -0
  131. package/dist/cirth.scoped.jade.min.css +1 -0
  132. package/dist/cirth.scoped.lime.css +3467 -0
  133. package/dist/cirth.scoped.lime.min.css +1 -0
  134. package/dist/cirth.scoped.min.css +1 -0
  135. package/dist/cirth.scoped.orange.css +3467 -0
  136. package/dist/cirth.scoped.orange.min.css +1 -0
  137. package/dist/cirth.scoped.pink.css +3467 -0
  138. package/dist/cirth.scoped.pink.min.css +1 -0
  139. package/dist/cirth.scoped.pumpkin.css +3467 -0
  140. package/dist/cirth.scoped.pumpkin.min.css +1 -0
  141. package/dist/cirth.scoped.purple.css +3467 -0
  142. package/dist/cirth.scoped.purple.min.css +1 -0
  143. package/dist/cirth.scoped.red.css +3467 -0
  144. package/dist/cirth.scoped.red.min.css +1 -0
  145. package/dist/cirth.scoped.sand.css +3467 -0
  146. package/dist/cirth.scoped.sand.min.css +1 -0
  147. package/dist/cirth.scoped.slate.css +3467 -0
  148. package/dist/cirth.scoped.slate.min.css +1 -0
  149. package/dist/cirth.scoped.violet.css +3467 -0
  150. package/dist/cirth.scoped.violet.min.css +1 -0
  151. package/dist/cirth.scoped.yellow.css +3467 -0
  152. package/dist/cirth.scoped.yellow.min.css +1 -0
  153. package/dist/cirth.scoped.zinc.css +3467 -0
  154. package/dist/cirth.scoped.zinc.min.css +1 -0
  155. package/dist/cirth.slate.css +3747 -0
  156. package/dist/cirth.slate.min.css +1 -0
  157. package/dist/cirth.violet.css +3747 -0
  158. package/dist/cirth.violet.min.css +1 -0
  159. package/dist/cirth.yellow.css +3747 -0
  160. package/dist/cirth.yellow.min.css +1 -0
  161. package/dist/cirth.zinc.css +3747 -0
  162. package/dist/cirth.zinc.min.css +1 -0
  163. package/package.json +55 -0
@@ -0,0 +1,2959 @@
1
+ .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");
37
+ }
38
+
39
+ @media (width >= 576px) {
40
+ .cirth {
41
+ --cirth-font-size: 106.25%;
42
+ }
43
+ }
44
+
45
+ @media (width >= 768px) {
46
+ .cirth {
47
+ --cirth-font-size: 112.5%;
48
+ }
49
+ }
50
+
51
+ @media (width >= 1024px) {
52
+ .cirth {
53
+ --cirth-font-size: 118.75%;
54
+ }
55
+ }
56
+
57
+ @media (width >= 1280px) {
58
+ .cirth {
59
+ --cirth-font-size: 125%;
60
+ }
61
+ }
62
+
63
+ @media (width >= 1536px) {
64
+ .cirth {
65
+ --cirth-font-size: 131.25%;
66
+ }
67
+ }
68
+
69
+ .cirth a {
70
+ --cirth-text-decoration: underline;
71
+ }
72
+
73
+ .cirth small {
74
+ --cirth-font-size: .875em;
75
+ }
76
+
77
+ .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
78
+ --cirth-font-weight: 700;
79
+ }
80
+
81
+ .cirth h1 {
82
+ --cirth-font-size: 2rem;
83
+ --cirth-line-height: 1.125;
84
+ --cirth-typography-spacing-top: 3rem;
85
+ }
86
+
87
+ .cirth h2 {
88
+ --cirth-font-size: 1.75rem;
89
+ --cirth-line-height: 1.15;
90
+ --cirth-typography-spacing-top: 2.625rem;
91
+ }
92
+
93
+ .cirth h3 {
94
+ --cirth-font-size: 1.5rem;
95
+ --cirth-line-height: 1.175;
96
+ --cirth-typography-spacing-top: 2.25rem;
97
+ }
98
+
99
+ .cirth h4 {
100
+ --cirth-font-size: 1.25rem;
101
+ --cirth-line-height: 1.2;
102
+ --cirth-typography-spacing-top: 1.874rem;
103
+ }
104
+
105
+ .cirth h5 {
106
+ --cirth-font-size: 1.125rem;
107
+ --cirth-line-height: 1.225;
108
+ --cirth-typography-spacing-top: 1.6875rem;
109
+ }
110
+
111
+ .cirth h6 {
112
+ --cirth-font-size: 1rem;
113
+ --cirth-line-height: 1.25;
114
+ --cirth-typography-spacing-top: 1.5rem;
115
+ }
116
+
117
+ .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
118
+ --cirth-font-weight: 600;
119
+ --cirth-border-width: .1875rem;
120
+ }
121
+
122
+ .cirth pre, .cirth code, .cirth kbd, .cirth samp {
123
+ --cirth-font-family: var(--cirth-font-family-monospace);
124
+ }
125
+
126
+ .cirth kbd {
127
+ --cirth-font-weight: bolder;
128
+ }
129
+
130
+ .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
131
+ --cirth-outline-width: .0625rem;
132
+ }
133
+
134
+ .cirth :where(select, textarea) {
135
+ --cirth-outline-width: .0625rem;
136
+ }
137
+
138
+ .cirth [type="search"] {
139
+ --cirth-border-radius: 5rem;
140
+ }
141
+
142
+ .cirth [type="checkbox"] {
143
+ --cirth-border-width: .125rem;
144
+ }
145
+
146
+ .cirth [type="radio"] {
147
+ --cirth-border-width: .125rem;
148
+ }
149
+
150
+ .cirth [type="checkbox"][role="switch"] {
151
+ --cirth-border-width: .1875rem;
152
+ }
153
+
154
+ .cirth [role="search"] {
155
+ --cirth-border-radius: 5rem;
156
+ }
157
+
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;
160
+ }
161
+
162
+ .cirth [role="search"] [type="submit"] {
163
+ --cirth-form-element-spacing-horizontal: 2rem;
164
+ }
165
+
166
+ .cirth [role="search"] [type="button"] {
167
+ --cirth-form-element-spacing-horizontal: 2rem;
168
+ }
169
+
170
+ .cirth [role="group"] [type="submit"] {
171
+ --cirth-form-element-spacing-horizontal: 2rem;
172
+ }
173
+
174
+ .cirth [role="group"] [type="button"] {
175
+ --cirth-form-element-spacing-horizontal: 2rem;
176
+ }
177
+
178
+ .cirth details summary[role="button"]:after {
179
+ filter: brightness(0) invert();
180
+ }
181
+
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(129, 145, 181, .25);
193
+ --cirth-muted-color: #646b79;
194
+ --cirth-muted-border-color: #e7eaf0;
195
+ --cirth-primary: #5d6b89;
196
+ --cirth-primary-background: #525f7a;
197
+ --cirth-primary-border: var(--cirth-primary-background);
198
+ --cirth-primary-underline: rgba(93, 107, 137, .5);
199
+ --cirth-primary-hover: #48536b;
200
+ --cirth-primary-hover-background: #48536b;
201
+ --cirth-primary-hover-border: var(--cirth-primary-hover-background);
202
+ --cirth-primary-hover-underline: var(--cirth-primary-hover);
203
+ --cirth-primary-focus: rgba(129, 145, 181, .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(144, 158, 190, .19);
308
+ --cirth-muted-color: #7b8495;
309
+ --cirth-muted-border-color: #202632;
310
+ --cirth-primary: #909ebe;
311
+ --cirth-primary-background: #525f7a;
312
+ --cirth-primary-border: var(--cirth-primary-background);
313
+ --cirth-primary-underline: rgba(144, 158, 190, .5);
314
+ --cirth-primary-hover: #b0b9d0;
315
+ --cirth-primary-hover-background: #5d6b89;
316
+ --cirth-primary-hover-border: var(--cirth-primary-hover-background);
317
+ --cirth-primary-hover-underline: var(--cirth-primary-hover);
318
+ --cirth-primary-focus: rgba(144, 158, 190, .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(144, 158, 190, .19);
415
+ --cirth-muted-color: #7b8495;
416
+ --cirth-muted-border-color: #202632;
417
+ --cirth-primary: #909ebe;
418
+ --cirth-primary-background: #525f7a;
419
+ --cirth-primary-border: var(--cirth-primary-background);
420
+ --cirth-primary-underline: rgba(144, 158, 190, .5);
421
+ --cirth-primary-hover: #b0b9d0;
422
+ --cirth-primary-hover-background: #5d6b89;
423
+ --cirth-primary-hover-border: var(--cirth-primary-hover-background);
424
+ --cirth-primary-hover-underline: var(--cirth-primary-hover);
425
+ --cirth-primary-focus: rgba(144, 158, 190, .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;
779
+ }
780
+
781
+ .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
782
+ --cirth-color: var(--cirth-primary-hover);
783
+ --cirth-underline: var(--cirth-primary-hover-underline);
784
+ --cirth-text-decoration: underline;
785
+ }
786
+
787
+ .cirth :where(a:not([role="button"])):focus-visible {
788
+ box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
789
+ }
790
+
791
+ .cirth [role="link"]:focus-visible {
792
+ box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
793
+ }
794
+
795
+ .cirth a[role="button"] {
796
+ display: inline-block;
797
+ }
798
+
799
+ .cirth button {
800
+ text-transform: none;
801
+ -webkit-appearance: button;
802
+ margin: 0;
803
+ font-family: inherit;
804
+ overflow: visible;
805
+ }
806
+
807
+ .cirth button, .cirth [role="button"] {
808
+ --cirth-background-color: var(--cirth-primary-background);
809
+ --cirth-border-color: var(--cirth-primary-border);
810
+ --cirth-color: var(--cirth-primary-inverse);
811
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
812
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
813
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
814
+ border-radius: var(--cirth-border-radius);
815
+ background-color: var(--cirth-background-color);
816
+ box-shadow: var(--cirth-box-shadow);
817
+ color: var(--cirth-color);
818
+ font-weight: var(--cirth-font-weight);
819
+ font-size: 1rem;
820
+ line-height: var(--cirth-line-height);
821
+ text-align: center;
822
+ cursor: pointer;
823
+ -webkit-user-select: none;
824
+ user-select: none;
825
+ transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
826
+ outline: none;
827
+ text-decoration: none;
828
+ }
829
+
830
+ .cirth [type="submit"] {
831
+ --cirth-background-color: var(--cirth-primary-background);
832
+ --cirth-border-color: var(--cirth-primary-border);
833
+ --cirth-color: var(--cirth-primary-inverse);
834
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
835
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
836
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
837
+ border-radius: var(--cirth-border-radius);
838
+ background-color: var(--cirth-background-color);
839
+ box-shadow: var(--cirth-box-shadow);
840
+ color: var(--cirth-color);
841
+ font-weight: var(--cirth-font-weight);
842
+ font-size: 1rem;
843
+ line-height: var(--cirth-line-height);
844
+ text-align: center;
845
+ cursor: pointer;
846
+ -webkit-user-select: none;
847
+ user-select: none;
848
+ transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
849
+ outline: none;
850
+ text-decoration: none;
851
+ }
852
+
853
+ .cirth [type="reset"] {
854
+ --cirth-background-color: var(--cirth-primary-background);
855
+ --cirth-border-color: var(--cirth-primary-border);
856
+ --cirth-color: var(--cirth-primary-inverse);
857
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
858
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
859
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
860
+ border-radius: var(--cirth-border-radius);
861
+ background-color: var(--cirth-background-color);
862
+ box-shadow: var(--cirth-box-shadow);
863
+ color: var(--cirth-color);
864
+ font-weight: var(--cirth-font-weight);
865
+ font-size: 1rem;
866
+ line-height: var(--cirth-line-height);
867
+ text-align: center;
868
+ cursor: pointer;
869
+ -webkit-user-select: none;
870
+ user-select: none;
871
+ transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
872
+ outline: none;
873
+ text-decoration: none;
874
+ }
875
+
876
+ .cirth [type="button"] {
877
+ --cirth-background-color: var(--cirth-primary-background);
878
+ --cirth-border-color: var(--cirth-primary-border);
879
+ --cirth-color: var(--cirth-primary-inverse);
880
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
881
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
882
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
883
+ border-radius: var(--cirth-border-radius);
884
+ background-color: var(--cirth-background-color);
885
+ box-shadow: var(--cirth-box-shadow);
886
+ color: var(--cirth-color);
887
+ font-weight: var(--cirth-font-weight);
888
+ font-size: 1rem;
889
+ line-height: var(--cirth-line-height);
890
+ text-align: center;
891
+ cursor: pointer;
892
+ -webkit-user-select: none;
893
+ user-select: none;
894
+ transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
895
+ outline: none;
896
+ text-decoration: none;
897
+ }
898
+
899
+ .cirth [type="file"]::file-selector-button {
900
+ --cirth-background-color: var(--cirth-primary-background);
901
+ --cirth-border-color: var(--cirth-primary-border);
902
+ --cirth-color: var(--cirth-primary-inverse);
903
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
904
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
905
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
906
+ border-radius: var(--cirth-border-radius);
907
+ background-color: var(--cirth-background-color);
908
+ box-shadow: var(--cirth-box-shadow);
909
+ color: var(--cirth-color);
910
+ font-weight: var(--cirth-font-weight);
911
+ font-size: 1rem;
912
+ line-height: var(--cirth-line-height);
913
+ text-align: center;
914
+ cursor: pointer;
915
+ -webkit-user-select: none;
916
+ user-select: none;
917
+ transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
918
+ outline: none;
919
+ text-decoration: none;
920
+ }
921
+
922
+ .cirth button[aria-current]:not([aria-current="false"]), .cirth [role="button"][aria-current]:not([aria-current="false"]) {
923
+ --cirth-background-color: var(--cirth-primary-hover-background);
924
+ --cirth-border-color: var(--cirth-primary-hover-border);
925
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
926
+ --cirth-color: var(--cirth-primary-inverse);
927
+ }
928
+
929
+ .cirth button:is(:hover, :active, :focus) {
930
+ --cirth-background-color: var(--cirth-primary-hover-background);
931
+ --cirth-border-color: var(--cirth-primary-hover-border);
932
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
933
+ --cirth-color: var(--cirth-primary-inverse);
934
+ }
935
+
936
+ .cirth [type="submit"][aria-current]:not([aria-current="false"]) {
937
+ --cirth-background-color: var(--cirth-primary-hover-background);
938
+ --cirth-border-color: var(--cirth-primary-hover-border);
939
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
940
+ --cirth-color: var(--cirth-primary-inverse);
941
+ }
942
+
943
+ .cirth [type="submit"]:is(:hover, :active, :focus) {
944
+ --cirth-background-color: var(--cirth-primary-hover-background);
945
+ --cirth-border-color: var(--cirth-primary-hover-border);
946
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
947
+ --cirth-color: var(--cirth-primary-inverse);
948
+ }
949
+
950
+ .cirth [type="reset"][aria-current]:not([aria-current="false"]) {
951
+ --cirth-background-color: var(--cirth-primary-hover-background);
952
+ --cirth-border-color: var(--cirth-primary-hover-border);
953
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
954
+ --cirth-color: var(--cirth-primary-inverse);
955
+ }
956
+
957
+ .cirth [type="reset"]:is(:hover, :active, :focus) {
958
+ --cirth-background-color: var(--cirth-primary-hover-background);
959
+ --cirth-border-color: var(--cirth-primary-hover-border);
960
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
961
+ --cirth-color: var(--cirth-primary-inverse);
962
+ }
963
+
964
+ .cirth [type="button"][aria-current]:not([aria-current="false"]) {
965
+ --cirth-background-color: var(--cirth-primary-hover-background);
966
+ --cirth-border-color: var(--cirth-primary-hover-border);
967
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
968
+ --cirth-color: var(--cirth-primary-inverse);
969
+ }
970
+
971
+ .cirth [type="button"]:is(:hover, :active, :focus) {
972
+ --cirth-background-color: var(--cirth-primary-hover-background);
973
+ --cirth-border-color: var(--cirth-primary-hover-border);
974
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
975
+ --cirth-color: var(--cirth-primary-inverse);
976
+ }
977
+
978
+ .cirth [type="file"]::file-selector-button:is() {
979
+ --cirth-background-color: var(--cirth-primary-hover-background);
980
+ --cirth-border-color: var(--cirth-primary-hover-border);
981
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
982
+ --cirth-color: var(--cirth-primary-inverse);
983
+ }
984
+
985
+ .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
986
+ --cirth-background-color: var(--cirth-primary-hover-background);
987
+ --cirth-border-color: var(--cirth-primary-hover-border);
988
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
989
+ --cirth-color: var(--cirth-primary-inverse);
990
+ }
991
+
992
+ .cirth [role="button"]:is(:hover, :active, :focus) {
993
+ --cirth-background-color: var(--cirth-primary-hover-background);
994
+ --cirth-border-color: var(--cirth-primary-hover-border);
995
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
996
+ --cirth-color: var(--cirth-primary-inverse);
997
+ }
998
+
999
+ .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);
1001
+ }
1002
+
1003
+ .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);
1005
+ }
1006
+
1007
+ .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);
1009
+ }
1010
+
1011
+ .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);
1013
+ }
1014
+
1015
+ .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);
1017
+ }
1018
+
1019
+ .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);
1021
+ }
1022
+
1023
+ .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);
1025
+ }
1026
+
1027
+ .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);
1029
+ }
1030
+
1031
+ .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);
1033
+ }
1034
+
1035
+ .cirth [type="submit"] {
1036
+ margin-bottom: var(--cirth-spacing);
1037
+ }
1038
+
1039
+ .cirth [type="reset"] {
1040
+ margin-bottom: var(--cirth-spacing);
1041
+ }
1042
+
1043
+ .cirth [type="button"] {
1044
+ margin-bottom: var(--cirth-spacing);
1045
+ }
1046
+
1047
+ .cirth [type="reset"] {
1048
+ --cirth-background-color: var(--cirth-secondary-background);
1049
+ --cirth-border-color: var(--cirth-secondary-border);
1050
+ --cirth-color: var(--cirth-secondary-inverse);
1051
+ cursor: pointer;
1052
+ }
1053
+
1054
+ .cirth [type="file"]::file-selector-button {
1055
+ --cirth-background-color: var(--cirth-secondary-background);
1056
+ --cirth-border-color: var(--cirth-secondary-border);
1057
+ --cirth-color: var(--cirth-secondary-inverse);
1058
+ cursor: pointer;
1059
+ }
1060
+
1061
+ .cirth [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1062
+ --cirth-background-color: var(--cirth-secondary-hover-background);
1063
+ --cirth-border-color: var(--cirth-secondary-hover-border);
1064
+ --cirth-color: var(--cirth-secondary-inverse);
1065
+ }
1066
+
1067
+ .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
1068
+ --cirth-background-color: var(--cirth-secondary-hover-background);
1069
+ --cirth-border-color: var(--cirth-secondary-hover-border);
1070
+ --cirth-color: var(--cirth-secondary-inverse);
1071
+ }
1072
+
1073
+ .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);
1075
+ }
1076
+
1077
+ .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);
1079
+ }
1080
+
1081
+ .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled] {
1082
+ opacity: .5;
1083
+ pointer-events: none;
1084
+ }
1085
+
1086
+ .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
1087
+ opacity: .5;
1088
+ pointer-events: none;
1089
+ }
1090
+
1091
+ .cirth :where(table) {
1092
+ border-collapse: collapse;
1093
+ border-spacing: 0;
1094
+ text-indent: 0;
1095
+ width: 100%;
1096
+ }
1097
+
1098
+ .cirth th, .cirth td {
1099
+ padding: calc(var(--cirth-spacing) / 2) var(--cirth-spacing);
1100
+ border-bottom: var(--cirth-border-width) solid var(--cirth-table-border-color);
1101
+ background-color: var(--cirth-background-color);
1102
+ color: var(--cirth-color);
1103
+ font-weight: var(--cirth-font-weight);
1104
+ text-align: left;
1105
+ text-align: start;
1106
+ }
1107
+
1108
+ .cirth tfoot th, .cirth tfoot td {
1109
+ border-top: var(--cirth-border-width) solid var(--cirth-table-border-color);
1110
+ border-bottom: 0;
1111
+ }
1112
+
1113
+ .cirth table.striped tbody tr:nth-child(odd) th, .cirth table.striped tbody tr:nth-child(odd) td {
1114
+ background-color: var(--cirth-table-row-stripped-background-color);
1115
+ }
1116
+
1117
+ .cirth :where(audio, canvas, iframe, img, svg, video) {
1118
+ vertical-align: middle;
1119
+ }
1120
+
1121
+ .cirth audio, .cirth video {
1122
+ display: inline-block;
1123
+ }
1124
+
1125
+ .cirth audio:not([controls]) {
1126
+ height: 0;
1127
+ display: none;
1128
+ }
1129
+
1130
+ .cirth :where(iframe) {
1131
+ border-style: none;
1132
+ }
1133
+
1134
+ .cirth img {
1135
+ border-style: none;
1136
+ max-width: 100%;
1137
+ height: auto;
1138
+ }
1139
+
1140
+ .cirth :where(svg:not([fill])) {
1141
+ fill: currentColor;
1142
+ }
1143
+
1144
+ .cirth svg:not(:root) {
1145
+ overflow: hidden;
1146
+ }
1147
+
1148
+ .cirth svg:not(:host) {
1149
+ overflow: hidden;
1150
+ }
1151
+
1152
+ .cirth pre, .cirth code, .cirth kbd, .cirth samp {
1153
+ font-size: .875em;
1154
+ font-family: var(--cirth-font-family);
1155
+ }
1156
+
1157
+ .cirth pre code, .cirth pre samp {
1158
+ font-size: inherit;
1159
+ font-family: inherit;
1160
+ }
1161
+
1162
+ .cirth pre {
1163
+ -ms-overflow-style: scrollbar;
1164
+ overflow: auto;
1165
+ }
1166
+
1167
+ .cirth pre, .cirth code, .cirth kbd, .cirth samp {
1168
+ border-radius: var(--cirth-border-radius);
1169
+ background: var(--cirth-code-background-color);
1170
+ color: var(--cirth-code-color);
1171
+ font-weight: var(--cirth-font-weight);
1172
+ line-height: initial;
1173
+ }
1174
+
1175
+ .cirth code, .cirth kbd, .cirth samp {
1176
+ padding: .375rem;
1177
+ display: inline-block;
1178
+ }
1179
+
1180
+ .cirth pre {
1181
+ margin-bottom: var(--cirth-spacing);
1182
+ display: block;
1183
+ overflow-x: auto;
1184
+ }
1185
+
1186
+ .cirth pre > code, .cirth pre > samp {
1187
+ padding: var(--cirth-spacing);
1188
+ line-height: var(--cirth-line-height);
1189
+ background: none;
1190
+ display: block;
1191
+ }
1192
+
1193
+ .cirth kbd {
1194
+ background-color: var(--cirth-code-kbd-background-color);
1195
+ color: var(--cirth-code-kbd-color);
1196
+ vertical-align: baseline;
1197
+ }
1198
+
1199
+ .cirth figure {
1200
+ margin: 0;
1201
+ padding: 0;
1202
+ display: block;
1203
+ }
1204
+
1205
+ .cirth figure figcaption {
1206
+ padding: calc(var(--cirth-spacing) * .5) 0;
1207
+ color: var(--cirth-muted-color);
1208
+ }
1209
+
1210
+ .cirth hr {
1211
+ height: 0;
1212
+ margin: var(--cirth-typography-spacing-vertical) 0;
1213
+ border: 0;
1214
+ border-top: 1px solid var(--cirth-muted-border-color);
1215
+ color: inherit;
1216
+ }
1217
+
1218
+ .cirth [hidden], .cirth template {
1219
+ display: none !important;
1220
+ }
1221
+
1222
+ .cirth canvas {
1223
+ display: inline-block;
1224
+ }
1225
+
1226
+ .cirth input, .cirth optgroup, .cirth select, .cirth textarea {
1227
+ font-size: 1rem;
1228
+ line-height: var(--cirth-line-height);
1229
+ letter-spacing: inherit;
1230
+ margin: 0;
1231
+ font-family: inherit;
1232
+ }
1233
+
1234
+ .cirth input {
1235
+ overflow: visible;
1236
+ }
1237
+
1238
+ .cirth select {
1239
+ text-transform: none;
1240
+ }
1241
+
1242
+ .cirth legend {
1243
+ max-width: 100%;
1244
+ color: inherit;
1245
+ white-space: normal;
1246
+ padding: 0;
1247
+ }
1248
+
1249
+ .cirth textarea {
1250
+ overflow: auto;
1251
+ }
1252
+
1253
+ .cirth [type="checkbox"] {
1254
+ padding: 0;
1255
+ }
1256
+
1257
+ .cirth [type="radio"] {
1258
+ padding: 0;
1259
+ }
1260
+
1261
+ .cirth ::-webkit-inner-spin-button {
1262
+ height: auto;
1263
+ }
1264
+
1265
+ .cirth ::-webkit-outer-spin-button {
1266
+ height: auto;
1267
+ }
1268
+
1269
+ .cirth [type="search"] {
1270
+ -webkit-appearance: textfield;
1271
+ outline-offset: -2px;
1272
+ }
1273
+
1274
+ .cirth [type="search"]::-webkit-search-decoration {
1275
+ -webkit-appearance: none;
1276
+ }
1277
+
1278
+ .cirth ::-webkit-file-upload-button {
1279
+ -webkit-appearance: button;
1280
+ font: inherit;
1281
+ }
1282
+
1283
+ .cirth ::-moz-focus-inner {
1284
+ border-style: none;
1285
+ padding: 0;
1286
+ }
1287
+
1288
+ .cirth :-moz-focusring {
1289
+ outline: none;
1290
+ }
1291
+
1292
+ .cirth :-moz-ui-invalid {
1293
+ box-shadow: none;
1294
+ }
1295
+
1296
+ .cirth ::-ms-expand {
1297
+ display: none;
1298
+ }
1299
+
1300
+ .cirth [type="file"] {
1301
+ border-width: 0;
1302
+ padding: 0;
1303
+ }
1304
+
1305
+ .cirth [type="range"] {
1306
+ border-width: 0;
1307
+ padding: 0;
1308
+ }
1309
+
1310
+ .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);
1312
+ }
1313
+
1314
+ .cirth fieldset {
1315
+ width: 100%;
1316
+ margin: 0;
1317
+ margin-bottom: var(--cirth-spacing);
1318
+ border: 0;
1319
+ padding: 0;
1320
+ }
1321
+
1322
+ .cirth label, .cirth fieldset legend {
1323
+ margin-bottom: calc(var(--cirth-spacing) * .375);
1324
+ color: var(--cirth-color);
1325
+ font-weight: var(--cirth-form-label-font-weight, var(--cirth-font-weight));
1326
+ display: block;
1327
+ }
1328
+
1329
+ .cirth fieldset legend {
1330
+ margin-bottom: calc(var(--cirth-spacing) * .5);
1331
+ }
1332
+
1333
+ .cirth select, .cirth textarea {
1334
+ width: 100%;
1335
+ }
1336
+
1337
+ .cirth input:not(:is([type="checkbox"], [type="radio"])) {
1338
+ width: 100%;
1339
+ }
1340
+
1341
+ .cirth button[type="submit"] {
1342
+ width: 100%;
1343
+ }
1344
+
1345
+ .cirth select, .cirth textarea {
1346
+ appearance: none;
1347
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
1348
+ }
1349
+
1350
+ .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
1351
+ appearance: none;
1352
+ padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
1353
+ }
1354
+
1355
+ .cirth input, .cirth select, .cirth textarea {
1356
+ --cirth-background-color: var(--cirth-form-element-background-color);
1357
+ --cirth-border-color: var(--cirth-form-element-border-color);
1358
+ --cirth-color: var(--cirth-form-element-color);
1359
+ --cirth-box-shadow: none;
1360
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
1361
+ border-radius: var(--cirth-border-radius);
1362
+ background-color: var(--cirth-background-color);
1363
+ box-shadow: var(--cirth-box-shadow);
1364
+ color: var(--cirth-color);
1365
+ font-weight: var(--cirth-font-weight);
1366
+ transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
1367
+ outline: none;
1368
+ }
1369
+
1370
+ .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly])):is(:active, :focus) {
1371
+ --cirth-background-color: var(--cirth-form-element-active-background-color);
1372
+ }
1373
+
1374
+ .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
1375
+ --cirth-background-color: var(--cirth-form-element-active-background-color);
1376
+ }
1377
+
1378
+ .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly])):is(:active, :focus) {
1379
+ --cirth-border-color: var(--cirth-form-element-active-border-color);
1380
+ }
1381
+
1382
+ .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
1383
+ --cirth-border-color: var(--cirth-form-element-active-border-color);
1384
+ }
1385
+
1386
+ .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);
1388
+ }
1389
+
1390
+ .cirth :where(select, textarea):not([readonly]):focus {
1391
+ --cirth-box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-form-element-focus-color);
1392
+ }
1393
+
1394
+ .cirth select[disabled], .cirth textarea[disabled], .cirth label[aria-disabled="true"] {
1395
+ opacity: var(--cirth-form-element-disabled-opacity);
1396
+ pointer-events: none;
1397
+ }
1398
+
1399
+ .cirth input:not(:is([type="submit"], [type="button"], [type="reset"]))[disabled] {
1400
+ opacity: var(--cirth-form-element-disabled-opacity);
1401
+ pointer-events: none;
1402
+ }
1403
+
1404
+ .cirth :where(fieldset[disabled]) :is(input:not(:is([type="submit"], [type="button"], [type="reset"])), select, textarea) {
1405
+ opacity: var(--cirth-form-element-disabled-opacity);
1406
+ pointer-events: none;
1407
+ }
1408
+
1409
+ .cirth label[aria-disabled="true"] input[disabled] {
1410
+ opacity: 1;
1411
+ }
1412
+
1413
+ .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] {
1414
+ padding-left: var(--cirth-form-element-spacing-horizontal);
1415
+ background-position: right .75rem center;
1416
+ 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;
1421
+ }
1422
+
1423
+ .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) {
1424
+ background-image: var(--cirth-icon-valid);
1425
+ }
1426
+
1427
+ .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="true"]:not(select) {
1428
+ background-image: var(--cirth-icon-invalid);
1429
+ }
1430
+
1431
+ .cirth :where(input, select, textarea)[aria-invalid="false"] {
1432
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1433
+ }
1434
+
1435
+ .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
1436
+ --cirth-border-color: var(--cirth-form-element-valid-active-border-color) !important;
1437
+ }
1438
+
1439
+ .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;
1441
+ }
1442
+
1443
+ .cirth :where(input, select, textarea)[aria-invalid="true"] {
1444
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1445
+ }
1446
+
1447
+ .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
1448
+ --cirth-border-color: var(--cirth-form-element-invalid-active-border-color) !important;
1449
+ }
1450
+
1451
+ .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;
1453
+ }
1454
+
1455
+ [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;
1457
+ }
1458
+
1459
+ .cirth select:invalid {
1460
+ color: var(--cirth-form-element-placeholder-color);
1461
+ opacity: 1;
1462
+ }
1463
+
1464
+ .cirth input::placeholder {
1465
+ color: var(--cirth-form-element-placeholder-color);
1466
+ opacity: 1;
1467
+ }
1468
+
1469
+ .cirth input::-webkit-input-placeholder {
1470
+ color: var(--cirth-form-element-placeholder-color);
1471
+ opacity: 1;
1472
+ }
1473
+
1474
+ .cirth textarea::placeholder {
1475
+ color: var(--cirth-form-element-placeholder-color);
1476
+ opacity: 1;
1477
+ }
1478
+
1479
+ .cirth textarea::-webkit-input-placeholder {
1480
+ color: var(--cirth-form-element-placeholder-color);
1481
+ opacity: 1;
1482
+ }
1483
+
1484
+ .cirth select, .cirth textarea {
1485
+ margin-bottom: var(--cirth-spacing);
1486
+ }
1487
+
1488
+ .cirth input:not(:is([type="checkbox"], [type="radio"])) {
1489
+ margin-bottom: var(--cirth-spacing);
1490
+ }
1491
+
1492
+ .cirth select::-ms-expand {
1493
+ background-color: rgba(0, 0, 0, 0);
1494
+ border: 0;
1495
+ }
1496
+
1497
+ .cirth select:not(:is([multiple], [size])) {
1498
+ padding-right: calc(var(--cirth-form-element-spacing-horizontal) + 1.5rem);
1499
+ padding-left: var(--cirth-form-element-spacing-horizontal);
1500
+ background-image: var(--cirth-icon-chevron);
1501
+ background-position: right .75rem center;
1502
+ background-repeat: no-repeat;
1503
+ background-size: 1rem;
1504
+ padding-inline-start: var(--cirth-form-element-spacing-horizontal);
1505
+ padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + 1.5rem);
1506
+ }
1507
+
1508
+ .cirth select[multiple] option:checked {
1509
+ background: var(--cirth-form-element-selected-background-color);
1510
+ color: var(--cirth-form-element-color);
1511
+ }
1512
+
1513
+ [dir="rtl"] .cirth select:not(:is([multiple], [size])) {
1514
+ background-position: .75rem;
1515
+ }
1516
+
1517
+ .cirth textarea {
1518
+ resize: vertical;
1519
+ display: block;
1520
+ }
1521
+
1522
+ .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;
1526
+ }
1527
+
1528
+ .cirth :where(input, select, textarea, fieldset) + small {
1529
+ width: 100%;
1530
+ margin-top: calc(var(--cirth-spacing) * -.75);
1531
+ margin-bottom: var(--cirth-spacing);
1532
+ color: var(--cirth-muted-color);
1533
+ display: block;
1534
+ }
1535
+
1536
+ .cirth :where(input, select, textarea, fieldset)[aria-invalid="false"] + small {
1537
+ color: var(--cirth-ins-color);
1538
+ }
1539
+
1540
+ .cirth :where(input, select, textarea, fieldset)[aria-invalid="true"] + small {
1541
+ color: var(--cirth-del-color);
1542
+ }
1543
+
1544
+ .cirth label > :where(input, select, textarea) {
1545
+ margin-top: calc(var(--cirth-spacing) * .25);
1546
+ }
1547
+
1548
+ .cirth label:has([type="checkbox"], [type="radio"]) {
1549
+ cursor: pointer;
1550
+ width: fit-content;
1551
+ }
1552
+
1553
+ .cirth [type="checkbox"] {
1554
+ appearance: none;
1555
+ margin-top: -.125em;
1556
+ border-width: var(--cirth-border-width);
1557
+ vertical-align: middle;
1558
+ cursor: pointer;
1559
+ width: 1.25em;
1560
+ height: 1.25em;
1561
+ margin-inline-end: .5em;
1562
+ }
1563
+
1564
+ .cirth [type="radio"] {
1565
+ appearance: none;
1566
+ margin-top: -.125em;
1567
+ border-width: var(--cirth-border-width);
1568
+ vertical-align: middle;
1569
+ cursor: pointer;
1570
+ width: 1.25em;
1571
+ height: 1.25em;
1572
+ margin-inline-end: .5em;
1573
+ }
1574
+
1575
+ .cirth [type="checkbox"]::-ms-check {
1576
+ display: none;
1577
+ }
1578
+
1579
+ .cirth [type="radio"]::-ms-check {
1580
+ display: none;
1581
+ }
1582
+
1583
+ .cirth [type="checkbox"]:checked {
1584
+ --cirth-background-color: var(--cirth-primary-background);
1585
+ --cirth-border-color: var(--cirth-primary-border);
1586
+ background-image: var(--cirth-icon-checkbox);
1587
+ background-position: center;
1588
+ background-repeat: no-repeat;
1589
+ background-size: .75em;
1590
+ }
1591
+
1592
+ .cirth [type="checkbox"]:checked:active {
1593
+ --cirth-background-color: var(--cirth-primary-background);
1594
+ --cirth-border-color: var(--cirth-primary-border);
1595
+ background-image: var(--cirth-icon-checkbox);
1596
+ background-position: center;
1597
+ background-repeat: no-repeat;
1598
+ background-size: .75em;
1599
+ }
1600
+
1601
+ .cirth [type="checkbox"]:checked:focus {
1602
+ --cirth-background-color: var(--cirth-primary-background);
1603
+ --cirth-border-color: var(--cirth-primary-border);
1604
+ background-image: var(--cirth-icon-checkbox);
1605
+ background-position: center;
1606
+ background-repeat: no-repeat;
1607
+ background-size: .75em;
1608
+ }
1609
+
1610
+ .cirth [type="radio"]:checked {
1611
+ --cirth-background-color: var(--cirth-primary-background);
1612
+ --cirth-border-color: var(--cirth-primary-border);
1613
+ background-image: var(--cirth-icon-checkbox);
1614
+ background-position: center;
1615
+ background-repeat: no-repeat;
1616
+ background-size: .75em;
1617
+ }
1618
+
1619
+ .cirth [type="radio"]:checked:active {
1620
+ --cirth-background-color: var(--cirth-primary-background);
1621
+ --cirth-border-color: var(--cirth-primary-border);
1622
+ background-image: var(--cirth-icon-checkbox);
1623
+ background-position: center;
1624
+ background-repeat: no-repeat;
1625
+ background-size: .75em;
1626
+ }
1627
+
1628
+ .cirth [type="radio"]:checked:focus {
1629
+ --cirth-background-color: var(--cirth-primary-background);
1630
+ --cirth-border-color: var(--cirth-primary-border);
1631
+ background-image: var(--cirth-icon-checkbox);
1632
+ background-position: center;
1633
+ background-repeat: no-repeat;
1634
+ background-size: .75em;
1635
+ }
1636
+
1637
+ .cirth [type="checkbox"] ~ label {
1638
+ cursor: pointer;
1639
+ margin-bottom: 0;
1640
+ display: inline-block;
1641
+ }
1642
+
1643
+ .cirth [type="radio"] ~ label {
1644
+ cursor: pointer;
1645
+ margin-bottom: 0;
1646
+ display: inline-block;
1647
+ }
1648
+
1649
+ .cirth [type="checkbox"] ~ label:not(:last-of-type) {
1650
+ margin-inline-end: 1em;
1651
+ }
1652
+
1653
+ .cirth [type="radio"] ~ label:not(:last-of-type) {
1654
+ margin-inline-end: 1em;
1655
+ }
1656
+
1657
+ .cirth [type="checkbox"]:indeterminate {
1658
+ --cirth-background-color: var(--cirth-primary-background);
1659
+ --cirth-border-color: var(--cirth-primary-border);
1660
+ background-image: var(--cirth-icon-minus);
1661
+ background-position: center;
1662
+ background-repeat: no-repeat;
1663
+ background-size: .75em;
1664
+ }
1665
+
1666
+ .cirth [type="radio"] {
1667
+ border-radius: 50%;
1668
+ }
1669
+
1670
+ .cirth [type="radio"]:checked {
1671
+ --cirth-background-color: var(--cirth-primary-inverse);
1672
+ background-image: none;
1673
+ border-width: .35em;
1674
+ }
1675
+
1676
+ .cirth [type="radio"]:checked:active {
1677
+ --cirth-background-color: var(--cirth-primary-inverse);
1678
+ background-image: none;
1679
+ border-width: .35em;
1680
+ }
1681
+
1682
+ .cirth [type="radio"]:checked:focus {
1683
+ --cirth-background-color: var(--cirth-primary-inverse);
1684
+ background-image: none;
1685
+ border-width: .35em;
1686
+ }
1687
+
1688
+ .cirth [type="checkbox"][role="switch"] {
1689
+ --cirth-background-color: var(--cirth-switch-background-color);
1690
+ --cirth-color: var(--cirth-switch-color);
1691
+ border: var(--cirth-border-width) solid var(--cirth-border-color);
1692
+ background-color: var(--cirth-background-color);
1693
+ border-radius: 1.25em;
1694
+ width: 2.25em;
1695
+ height: 1.25em;
1696
+ line-height: 1.25em;
1697
+ }
1698
+
1699
+ .cirth [type="checkbox"][role="switch"]:not([aria-invalid]) {
1700
+ --cirth-border-color: var(--cirth-switch-background-color);
1701
+ }
1702
+
1703
+ .cirth [type="checkbox"][role="switch"]:before {
1704
+ aspect-ratio: 1;
1705
+ background-color: var(--cirth-color);
1706
+ height: 100%;
1707
+ box-shadow: var(--cirth-switch-thumb-box-shadow);
1708
+ content: "";
1709
+ border-radius: 50%;
1710
+ transition: margin .1s ease-in-out;
1711
+ display: block;
1712
+ }
1713
+
1714
+ .cirth [type="checkbox"][role="switch"]:focus {
1715
+ --cirth-background-color: var(--cirth-switch-background-color);
1716
+ --cirth-border-color: var(--cirth-switch-background-color);
1717
+ }
1718
+
1719
+ .cirth [type="checkbox"][role="switch"]:checked {
1720
+ --cirth-background-color: var(--cirth-switch-checked-background-color);
1721
+ --cirth-border-color: var(--cirth-switch-checked-background-color);
1722
+ background-image: none;
1723
+ }
1724
+
1725
+ .cirth [type="checkbox"][role="switch"]:checked:before {
1726
+ margin-inline-start: 1em;
1727
+ }
1728
+
1729
+ .cirth [type="checkbox"][role="switch"][disabled] {
1730
+ --cirth-background-color: var(--cirth-border-color);
1731
+ }
1732
+
1733
+ .cirth [type="checkbox"][aria-invalid="false"]:checked {
1734
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1735
+ }
1736
+
1737
+ .cirth [type="checkbox"][aria-invalid="false"]:checked:active {
1738
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1739
+ }
1740
+
1741
+ .cirth [type="checkbox"][aria-invalid="false"]:checked:focus {
1742
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1743
+ }
1744
+
1745
+ .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1746
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1747
+ }
1748
+
1749
+ .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1750
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1751
+ }
1752
+
1753
+ .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1754
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1755
+ }
1756
+
1757
+ .cirth [type="checkbox"]:checked[aria-invalid="true"] {
1758
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1759
+ }
1760
+
1761
+ .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1762
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1763
+ }
1764
+
1765
+ .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1766
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1767
+ }
1768
+
1769
+ .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1770
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1771
+ }
1772
+
1773
+ .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1774
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1775
+ }
1776
+
1777
+ .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1778
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1779
+ }
1780
+
1781
+ .cirth [type="checkbox"][aria-invalid="false"]:checked {
1782
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1783
+ }
1784
+
1785
+ .cirth [type="checkbox"][aria-invalid="false"]:checked:active {
1786
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1787
+ }
1788
+
1789
+ .cirth [type="checkbox"][aria-invalid="false"]:checked:focus {
1790
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1791
+ }
1792
+
1793
+ .cirth [type="radio"][aria-invalid="false"]:checked {
1794
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1795
+ }
1796
+
1797
+ .cirth [type="radio"][aria-invalid="false"]:checked:active {
1798
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1799
+ }
1800
+
1801
+ .cirth [type="radio"][aria-invalid="false"]:checked:focus {
1802
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1803
+ }
1804
+
1805
+ .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1806
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1807
+ }
1808
+
1809
+ .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1810
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1811
+ }
1812
+
1813
+ .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1814
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1815
+ }
1816
+
1817
+ .cirth [type="checkbox"]:checked[aria-invalid="true"] {
1818
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1819
+ }
1820
+
1821
+ .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1822
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1823
+ }
1824
+
1825
+ .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1826
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1827
+ }
1828
+
1829
+ .cirth [type="radio"]:checked[aria-invalid="true"] {
1830
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1831
+ }
1832
+
1833
+ .cirth [type="radio"]:checked:active[aria-invalid="true"] {
1834
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1835
+ }
1836
+
1837
+ .cirth [type="radio"]:checked:focus[aria-invalid="true"] {
1838
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1839
+ }
1840
+
1841
+ .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1842
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1843
+ }
1844
+
1845
+ .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1846
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1847
+ }
1848
+
1849
+ .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1850
+ --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1851
+ }
1852
+
1853
+ .cirth [type="color"]::-webkit-color-swatch-wrapper {
1854
+ padding: 0;
1855
+ }
1856
+
1857
+ .cirth [type="color"]::-moz-focus-inner {
1858
+ padding: 0;
1859
+ }
1860
+
1861
+ .cirth [type="color"]::-webkit-color-swatch {
1862
+ border-radius: calc(var(--cirth-border-radius) * .5);
1863
+ border: 0;
1864
+ }
1865
+
1866
+ .cirth [type="color"]::-moz-color-swatch {
1867
+ border-radius: calc(var(--cirth-border-radius) * .5);
1868
+ border: 0;
1869
+ }
1870
+
1871
+ .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;
1874
+ padding-right: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
1875
+ background-image: var(--cirth-icon-date);
1876
+ background-position: center right var(--cirth-icon-position);
1877
+ background-size: var(--cirth-icon-width) auto;
1878
+ background-repeat: no-repeat;
1879
+ }
1880
+
1881
+ .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="time"] {
1882
+ background-image: var(--cirth-icon-time);
1883
+ }
1884
+
1885
+ .cirth [type="date"]::-webkit-calendar-picker-indicator {
1886
+ width: var(--cirth-icon-width);
1887
+ margin-right: calc(var(--cirth-icon-width) * -1);
1888
+ margin-left: var(--cirth-icon-position);
1889
+ opacity: 0;
1890
+ }
1891
+
1892
+ .cirth [type="datetime-local"]::-webkit-calendar-picker-indicator {
1893
+ width: var(--cirth-icon-width);
1894
+ margin-right: calc(var(--cirth-icon-width) * -1);
1895
+ margin-left: var(--cirth-icon-position);
1896
+ opacity: 0;
1897
+ }
1898
+
1899
+ .cirth [type="month"]::-webkit-calendar-picker-indicator {
1900
+ width: var(--cirth-icon-width);
1901
+ margin-right: calc(var(--cirth-icon-width) * -1);
1902
+ margin-left: var(--cirth-icon-position);
1903
+ opacity: 0;
1904
+ }
1905
+
1906
+ .cirth [type="time"]::-webkit-calendar-picker-indicator {
1907
+ width: var(--cirth-icon-width);
1908
+ margin-right: calc(var(--cirth-icon-width) * -1);
1909
+ margin-left: var(--cirth-icon-position);
1910
+ opacity: 0;
1911
+ }
1912
+
1913
+ .cirth [type="week"]::-webkit-calendar-picker-indicator {
1914
+ width: var(--cirth-icon-width);
1915
+ margin-right: calc(var(--cirth-icon-width) * -1);
1916
+ margin-left: var(--cirth-icon-position);
1917
+ opacity: 0;
1918
+ }
1919
+
1920
+ @-moz-document url-prefix() {
1921
+ .cirth [type="date"] {
1922
+ padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1923
+ background-image: none !important;
1924
+ }
1925
+
1926
+ .cirth [type="datetime-local"] {
1927
+ padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1928
+ background-image: none !important;
1929
+ }
1930
+
1931
+ .cirth [type="month"] {
1932
+ padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1933
+ background-image: none !important;
1934
+ }
1935
+
1936
+ .cirth [type="time"] {
1937
+ padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1938
+ background-image: none !important;
1939
+ }
1940
+
1941
+ .cirth [type="week"] {
1942
+ padding-right: var(--cirth-form-element-spacing-horizontal) !important;
1943
+ background-image: none !important;
1944
+ }
1945
+ }
1946
+
1947
+ [dir="rtl"] .cirth :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1948
+ text-align: right;
1949
+ }
1950
+
1951
+ .cirth [type="file"] {
1952
+ --cirth-color: var(--cirth-muted-color);
1953
+ margin-left: calc(var(--cirth-outline-width) * -1);
1954
+ padding: calc(var(--cirth-form-element-spacing-vertical) * .5) 0;
1955
+ padding-left: var(--cirth-outline-width);
1956
+ background: none;
1957
+ border: 0;
1958
+ border-radius: 0;
1959
+ }
1960
+
1961
+ .cirth [type="file"]::file-selector-button {
1962
+ margin-right: calc(var(--cirth-spacing) / 2);
1963
+ padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
1964
+ }
1965
+
1966
+ .cirth [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1967
+ --cirth-background-color: var(--cirth-secondary-hover-background);
1968
+ --cirth-border-color: var(--cirth-secondary-hover-border);
1969
+ }
1970
+
1971
+ .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);
1973
+ }
1974
+
1975
+ .cirth [type="range"] {
1976
+ appearance: none;
1977
+ background: none;
1978
+ width: 100%;
1979
+ height: 1.25rem;
1980
+ }
1981
+
1982
+ .cirth [type="range"]::-webkit-slider-runnable-track {
1983
+ border-radius: var(--cirth-border-radius);
1984
+ background-color: var(--cirth-range-border-color);
1985
+ width: 100%;
1986
+ height: .375rem;
1987
+ transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
1988
+ }
1989
+
1990
+ .cirth [type="range"]::-moz-range-track {
1991
+ border-radius: var(--cirth-border-radius);
1992
+ background-color: var(--cirth-range-border-color);
1993
+ width: 100%;
1994
+ height: .375rem;
1995
+ transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
1996
+ }
1997
+
1998
+ .cirth [type="range"]::-ms-track {
1999
+ border-radius: var(--cirth-border-radius);
2000
+ background-color: var(--cirth-range-border-color);
2001
+ width: 100%;
2002
+ height: .375rem;
2003
+ transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
2004
+ }
2005
+
2006
+ .cirth [type="range"]::-webkit-slider-thumb {
2007
+ -webkit-appearance: none;
2008
+ border: 2px solid var(--cirth-range-thumb-border-color);
2009
+ background-color: var(--cirth-range-thumb-color);
2010
+ cursor: pointer;
2011
+ width: 1.25rem;
2012
+ height: 1.25rem;
2013
+ transition: background-color var(--cirth-transition), transform var(--cirth-transition);
2014
+ border-radius: 50%;
2015
+ margin-top: -.4375rem;
2016
+ }
2017
+
2018
+ .cirth [type="range"]::-moz-range-thumb {
2019
+ -webkit-appearance: none;
2020
+ border: 2px solid var(--cirth-range-thumb-border-color);
2021
+ background-color: var(--cirth-range-thumb-color);
2022
+ cursor: pointer;
2023
+ width: 1.25rem;
2024
+ height: 1.25rem;
2025
+ transition: background-color var(--cirth-transition), transform var(--cirth-transition);
2026
+ border-radius: 50%;
2027
+ margin-top: -.4375rem;
2028
+ }
2029
+
2030
+ .cirth [type="range"]::-ms-thumb {
2031
+ -webkit-appearance: none;
2032
+ border: 2px solid var(--cirth-range-thumb-border-color);
2033
+ background-color: var(--cirth-range-thumb-color);
2034
+ cursor: pointer;
2035
+ width: 1.25rem;
2036
+ height: 1.25rem;
2037
+ transition: background-color var(--cirth-transition), transform var(--cirth-transition);
2038
+ border-radius: 50%;
2039
+ margin-top: -.4375rem;
2040
+ }
2041
+
2042
+ .cirth [type="range"]:active {
2043
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
2044
+ --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
2045
+ }
2046
+
2047
+ .cirth [type="range"]:focus-within {
2048
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
2049
+ --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
2050
+ }
2051
+
2052
+ .cirth [type="range"]:active::-webkit-slider-thumb {
2053
+ transform: scale(1.25);
2054
+ }
2055
+
2056
+ .cirth [type="range"]:active::-moz-range-thumb {
2057
+ transform: scale(1.25);
2058
+ }
2059
+
2060
+ .cirth [type="range"]:active::-ms-thumb {
2061
+ transform: scale(1.25);
2062
+ }
2063
+
2064
+ .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
2065
+ background-image: var(--cirth-icon-search);
2066
+ background-position: center left calc(var(--cirth-form-element-spacing-horizontal) + .125rem);
2067
+ background-repeat: no-repeat;
2068
+ background-size: 1rem;
2069
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
2070
+ }
2071
+
2072
+ .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
2073
+ background-position: 1.125rem, right .75rem center;
2074
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem) !important;
2075
+ }
2076
+
2077
+ .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="false"] {
2078
+ background-image: var(--cirth-icon-search), var(--cirth-icon-valid);
2079
+ }
2080
+
2081
+ .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="true"] {
2082
+ background-image: var(--cirth-icon-search), var(--cirth-icon-invalid);
2083
+ }
2084
+
2085
+ [dir="rtl"] .cirth :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
2086
+ background-position: right 1.125rem center;
2087
+ }
2088
+
2089
+ [dir="rtl"] .cirth :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
2090
+ background-position: right 1.125rem center, .75rem;
2091
+ }
2092
+
2093
+ .cirth details {
2094
+ margin-bottom: var(--cirth-spacing);
2095
+ display: block;
2096
+ }
2097
+
2098
+ .cirth details summary {
2099
+ cursor: pointer;
2100
+ transition: color var(--cirth-transition);
2101
+ line-height: 1rem;
2102
+ list-style-type: none;
2103
+ }
2104
+
2105
+ .cirth details summary:not([role]) {
2106
+ color: var(--cirth-accordion-close-summary-color);
2107
+ }
2108
+
2109
+ .cirth details summary::-webkit-details-marker {
2110
+ display: none;
2111
+ }
2112
+
2113
+ .cirth details summary::marker {
2114
+ display: none;
2115
+ }
2116
+
2117
+ .cirth details summary::-moz-list-bullet {
2118
+ list-style-type: none;
2119
+ }
2120
+
2121
+ .cirth details summary:after {
2122
+ width: 1rem;
2123
+ height: 1rem;
2124
+ float: right;
2125
+ background-image: var(--cirth-icon-chevron);
2126
+ content: "";
2127
+ transition: transform var(--cirth-transition);
2128
+ background-position: 100%;
2129
+ background-repeat: no-repeat;
2130
+ background-size: 1rem;
2131
+ margin-inline-start: calc(var(--cirth-spacing, 1rem) * .5);
2132
+ display: block;
2133
+ transform: rotate(-90deg);
2134
+ }
2135
+
2136
+ .cirth details summary:focus {
2137
+ outline: none;
2138
+ }
2139
+
2140
+ .cirth details summary:focus:not([role]) {
2141
+ color: var(--cirth-accordion-active-summary-color);
2142
+ }
2143
+
2144
+ .cirth details summary:focus-visible:not([role]) {
2145
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
2146
+ outline-offset: calc(var(--cirth-spacing, 1rem) * .5);
2147
+ color: var(--cirth-primary);
2148
+ }
2149
+
2150
+ .cirth details summary[role="button"] {
2151
+ text-align: left;
2152
+ width: 100%;
2153
+ }
2154
+
2155
+ .cirth details summary[role="button"]:after {
2156
+ height: calc(1rem * var(--cirth-line-height, 1.5));
2157
+ }
2158
+
2159
+ .cirth details[open] > summary {
2160
+ margin-bottom: var(--cirth-spacing);
2161
+ }
2162
+
2163
+ .cirth details[open] > summary:not([role]):not(:focus) {
2164
+ color: var(--cirth-accordion-open-summary-color);
2165
+ }
2166
+
2167
+ .cirth details[open] > summary:after {
2168
+ transform: rotate(0);
2169
+ }
2170
+
2171
+ [dir="rtl"] .cirth details summary {
2172
+ text-align: right;
2173
+ }
2174
+
2175
+ [dir="rtl"] .cirth details summary:after {
2176
+ float: left;
2177
+ background-position: 0;
2178
+ }
2179
+
2180
+ .cirth article {
2181
+ margin-bottom: var(--cirth-block-spacing-vertical);
2182
+ padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
2183
+ border-radius: var(--cirth-border-radius);
2184
+ background: var(--cirth-card-background-color);
2185
+ box-shadow: var(--cirth-card-box-shadow);
2186
+ }
2187
+
2188
+ .cirth article > header, .cirth article > footer {
2189
+ margin-right: calc(var(--cirth-block-spacing-horizontal) * -1);
2190
+ margin-left: calc(var(--cirth-block-spacing-horizontal) * -1);
2191
+ padding: calc(var(--cirth-block-spacing-vertical) * .66) var(--cirth-block-spacing-horizontal);
2192
+ background-color: var(--cirth-card-sectioning-background-color);
2193
+ }
2194
+
2195
+ .cirth article > header {
2196
+ margin-top: calc(var(--cirth-block-spacing-vertical) * -1);
2197
+ margin-bottom: var(--cirth-block-spacing-vertical);
2198
+ border-bottom: var(--cirth-border-width) solid var(--cirth-card-border-color);
2199
+ border-top-right-radius: var(--cirth-border-radius);
2200
+ border-top-left-radius: var(--cirth-border-radius);
2201
+ }
2202
+
2203
+ .cirth article > footer {
2204
+ margin-top: var(--cirth-block-spacing-vertical);
2205
+ margin-bottom: calc(var(--cirth-block-spacing-vertical) * -1);
2206
+ border-top: var(--cirth-border-width) solid var(--cirth-card-border-color);
2207
+ border-bottom-right-radius: var(--cirth-border-radius);
2208
+ border-bottom-left-radius: var(--cirth-border-radius);
2209
+ }
2210
+
2211
+ .cirth [role="search"], .cirth [role="group"] {
2212
+ width: 100%;
2213
+ margin-bottom: var(--cirth-spacing);
2214
+ border-radius: var(--cirth-border-radius);
2215
+ box-shadow: var(--cirth-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
2216
+ vertical-align: middle;
2217
+ transition: box-shadow var(--cirth-transition);
2218
+ display: inline-flex;
2219
+ position: relative;
2220
+ }
2221
+
2222
+ .cirth [role="search"] > *, .cirth [role="search"] select, .cirth [role="group"] > *, .cirth [role="group"] select {
2223
+ flex: auto;
2224
+ margin-bottom: 0;
2225
+ position: relative;
2226
+ }
2227
+
2228
+ .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])) {
2229
+ flex: auto;
2230
+ margin-bottom: 0;
2231
+ position: relative;
2232
+ }
2233
+
2234
+ .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])) {
2235
+ flex: auto;
2236
+ margin-bottom: 0;
2237
+ position: relative;
2238
+ }
2239
+
2240
+ .cirth [role="search"] > :not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] > :not(:first-child), .cirth [role="group"] select:not(:first-child) {
2241
+ border-top-left-radius: 0;
2242
+ border-bottom-left-radius: 0;
2243
+ margin-left: 0;
2244
+ }
2245
+
2246
+ .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2247
+ border-top-left-radius: 0;
2248
+ border-bottom-left-radius: 0;
2249
+ margin-left: 0;
2250
+ }
2251
+
2252
+ .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2253
+ border-top-left-radius: 0;
2254
+ border-bottom-left-radius: 0;
2255
+ margin-left: 0;
2256
+ }
2257
+
2258
+ .cirth [role="search"] > :not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"] > :not(:last-child), .cirth [role="group"] select:not(:last-child) {
2259
+ border-top-right-radius: 0;
2260
+ border-bottom-right-radius: 0;
2261
+ }
2262
+
2263
+ .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
2264
+ border-top-right-radius: 0;
2265
+ border-bottom-right-radius: 0;
2266
+ }
2267
+
2268
+ .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
2269
+ border-top-right-radius: 0;
2270
+ border-bottom-right-radius: 0;
2271
+ }
2272
+
2273
+ .cirth [role="search"] > :focus, .cirth [role="search"] select:focus, .cirth [role="group"] > :focus, .cirth [role="group"] select:focus {
2274
+ z-index: 2;
2275
+ }
2276
+
2277
+ .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):focus {
2278
+ z-index: 2;
2279
+ }
2280
+
2281
+ .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):focus {
2282
+ z-index: 2;
2283
+ }
2284
+
2285
+ .cirth [role="search"] button:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] button:not(:first-child), .cirth [role="group"] [role="button"]:not(:first-child), .cirth [role="group"] select:not(:first-child) {
2286
+ margin-left: calc(var(--cirth-border-width) * -1);
2287
+ }
2288
+
2289
+ .cirth [role="search"] [type="submit"]:not(:first-child) {
2290
+ margin-left: calc(var(--cirth-border-width) * -1);
2291
+ }
2292
+
2293
+ .cirth [role="search"] [type="reset"]:not(:first-child) {
2294
+ margin-left: calc(var(--cirth-border-width) * -1);
2295
+ }
2296
+
2297
+ .cirth [role="search"] [type="button"]:not(:first-child) {
2298
+ margin-left: calc(var(--cirth-border-width) * -1);
2299
+ }
2300
+
2301
+ .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2302
+ margin-left: calc(var(--cirth-border-width) * -1);
2303
+ }
2304
+
2305
+ .cirth [role="group"] [type="submit"]:not(:first-child) {
2306
+ margin-left: calc(var(--cirth-border-width) * -1);
2307
+ }
2308
+
2309
+ .cirth [role="group"] [type="reset"]:not(:first-child) {
2310
+ margin-left: calc(var(--cirth-border-width) * -1);
2311
+ }
2312
+
2313
+ .cirth [role="group"] [type="button"]:not(:first-child) {
2314
+ margin-left: calc(var(--cirth-border-width) * -1);
2315
+ }
2316
+
2317
+ .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2318
+ margin-left: calc(var(--cirth-border-width) * -1);
2319
+ }
2320
+
2321
+ .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
2322
+ width: auto;
2323
+ }
2324
+
2325
+ .cirth [role="search"] [type="submit"] {
2326
+ width: auto;
2327
+ }
2328
+
2329
+ .cirth [role="search"] [type="reset"] {
2330
+ width: auto;
2331
+ }
2332
+
2333
+ .cirth [role="search"] [type="button"] {
2334
+ width: auto;
2335
+ }
2336
+
2337
+ .cirth [role="group"] [type="submit"] {
2338
+ width: auto;
2339
+ }
2340
+
2341
+ .cirth [role="group"] [type="reset"] {
2342
+ width: auto;
2343
+ }
2344
+
2345
+ .cirth [role="group"] [type="button"] {
2346
+ width: auto;
2347
+ }
2348
+
2349
+ @supports selector(:has(*)) {
2350
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
2351
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
2352
+ }
2353
+
2354
+ .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
2355
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
2356
+ }
2357
+
2358
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
2359
+ border-color: rgba(0, 0, 0, 0);
2360
+ }
2361
+
2362
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
2363
+ border-color: rgba(0, 0, 0, 0);
2364
+ }
2365
+
2366
+ .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
2367
+ border-color: rgba(0, 0, 0, 0);
2368
+ }
2369
+
2370
+ .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
2371
+ border-color: rgba(0, 0, 0, 0);
2372
+ }
2373
+
2374
+ .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
2375
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
2376
+ }
2377
+
2378
+ .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
2379
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
2380
+ }
2381
+
2382
+ .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);
2385
+ }
2386
+
2387
+ .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);
2390
+ }
2391
+
2392
+ .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);
2395
+ }
2396
+
2397
+ .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);
2400
+ }
2401
+
2402
+ .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);
2405
+ }
2406
+
2407
+ .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);
2410
+ }
2411
+
2412
+ .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);
2415
+ }
2416
+
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
+ }
2421
+
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
+ }
2425
+
2426
+ .cirth [role="search"] [type="submit"]:focus {
2427
+ box-shadow: none;
2428
+ }
2429
+
2430
+ .cirth [role="search"] [type="reset"]:focus {
2431
+ box-shadow: none;
2432
+ }
2433
+
2434
+ .cirth [role="search"] [type="button"]:focus {
2435
+ box-shadow: none;
2436
+ }
2437
+
2438
+ .cirth [role="group"] [type="submit"]:focus {
2439
+ box-shadow: none;
2440
+ }
2441
+
2442
+ .cirth [role="group"] [type="reset"]:focus {
2443
+ box-shadow: none;
2444
+ }
2445
+
2446
+ .cirth [role="group"] [type="button"]:focus {
2447
+ box-shadow: none;
2448
+ }
2449
+ }
2450
+
2451
+ .cirth [role="search"] > :first-child {
2452
+ border-top-left-radius: 5rem;
2453
+ border-bottom-left-radius: 5rem;
2454
+ }
2455
+
2456
+ .cirth [role="search"] > :last-child {
2457
+ border-top-right-radius: 5rem;
2458
+ border-bottom-right-radius: 5rem;
2459
+ }
2460
+
2461
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
2462
+ white-space: nowrap;
2463
+ }
2464
+
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;
2474
+ }
2475
+
2476
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
2477
+ margin-inline-end: calc(var(--cirth-spacing) * .5);
2478
+ }
2479
+
2480
+ .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
2481
+ text-align: center;
2482
+ }
2483
+
2484
+ .cirth button[aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
2485
+ pointer-events: none;
2486
+ }
2487
+
2488
+ .cirth [type="submit"][aria-busy="true"] {
2489
+ pointer-events: none;
2490
+ }
2491
+
2492
+ .cirth [type="button"][aria-busy="true"] {
2493
+ pointer-events: none;
2494
+ }
2495
+
2496
+ .cirth [type="reset"][aria-busy="true"] {
2497
+ pointer-events: none;
2498
+ }
2499
+
2500
+ .cirth {
2501
+ --cirth-scrollbar-width: 0px;
2502
+ }
2503
+
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;
2521
+ }
2522
+
2523
+ .cirth dialog > article {
2524
+ width: 100%;
2525
+ max-height: calc(100vh - var(--cirth-spacing) * 2);
2526
+ margin: var(--cirth-spacing);
2527
+ overflow: auto;
2528
+ }
2529
+
2530
+ @media (width >= 576px) {
2531
+ .cirth dialog > article {
2532
+ max-width: 510px;
2533
+ }
2534
+ }
2535
+
2536
+ @media (width >= 768px) {
2537
+ .cirth dialog > article {
2538
+ max-width: 700px;
2539
+ }
2540
+ }
2541
+
2542
+ .cirth dialog > article > header > * {
2543
+ margin-bottom: 0;
2544
+ }
2545
+
2546
+ .cirth dialog > article > header :is(a, button)[rel="prev"] {
2547
+ margin: 0;
2548
+ margin-left: var(--cirth-spacing);
2549
+ float: right;
2550
+ padding: 0;
2551
+ }
2552
+
2553
+ .cirth dialog > article > footer {
2554
+ text-align: right;
2555
+ }
2556
+
2557
+ .cirth dialog > article > footer button, .cirth dialog > article > footer [role="button"] {
2558
+ margin-bottom: 0;
2559
+ }
2560
+
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);
2563
+ }
2564
+
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;
2580
+ }
2581
+
2582
+ .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2583
+ opacity: 1;
2584
+ }
2585
+
2586
+ .cirth dialog:not([open]), .cirth dialog[open="false"] {
2587
+ display: none;
2588
+ }
2589
+
2590
+ :where(nav li):before {
2591
+ float: left;
2592
+ content: "​";
2593
+ }
2594
+
2595
+ .cirth nav, .cirth nav ul {
2596
+ display: flex;
2597
+ }
2598
+
2599
+ .cirth nav {
2600
+ justify-content: space-between;
2601
+ overflow: visible;
2602
+ }
2603
+
2604
+ .cirth nav ol, .cirth nav ul {
2605
+ align-items: center;
2606
+ margin-bottom: 0;
2607
+ padding: 0;
2608
+ list-style: none;
2609
+ }
2610
+
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
+ }
2614
+
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
+ }
2618
+
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;
2623
+ }
2624
+
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;
2630
+ }
2631
+
2632
+ .cirth nav li :where(a, [role="link"]):not(:hover) {
2633
+ text-decoration: none;
2634
+ }
2635
+
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);
2642
+ }
2643
+
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);
2650
+ }
2651
+
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);
2658
+ }
2659
+
2660
+ .cirth nav[aria-label="breadcrumb"] {
2661
+ justify-content: start;
2662
+ align-items: center;
2663
+ }
2664
+
2665
+ .cirth nav[aria-label="breadcrumb"] ul li:not(:first-child) {
2666
+ margin-inline-start: var(--cirth-nav-link-spacing-horizontal);
2667
+ }
2668
+
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);
2672
+ }
2673
+
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;
2684
+ }
2685
+
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;
2691
+ }
2692
+
2693
+ .cirth aside nav, .cirth aside ol, .cirth aside ul, .cirth aside li {
2694
+ display: block;
2695
+ }
2696
+
2697
+ .cirth aside li {
2698
+ padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) var(--cirth-nav-element-spacing-horizontal);
2699
+ }
2700
+
2701
+ .cirth aside li a {
2702
+ display: block;
2703
+ }
2704
+
2705
+ .cirth aside li [role="button"] {
2706
+ margin: inherit;
2707
+ }
2708
+
2709
+ [dir="rtl"] .cirth nav[aria-label="breadcrumb"] ul li:not(:last-child) :after {
2710
+ content: "\\";
2711
+ }
2712
+
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;
2725
+ }
2726
+
2727
+ .cirth progress::-webkit-progress-bar {
2728
+ border-radius: var(--cirth-border-radius);
2729
+ background: none;
2730
+ }
2731
+
2732
+ .cirth progress[value]::-webkit-progress-value {
2733
+ background-color: var(--cirth-progress-color);
2734
+ transition: inline-size var(--cirth-transition);
2735
+ }
2736
+
2737
+ .cirth progress::-moz-progress-bar {
2738
+ background-color: var(--cirth-progress-color);
2739
+ }
2740
+
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
+ }
2746
+
2747
+ .cirth progress:indeterminate[value]::-webkit-progress-value {
2748
+ background-color: rgba(0, 0, 0, 0);
2749
+ }
2750
+
2751
+ .cirth progress:indeterminate::-moz-progress-bar {
2752
+ background-color: rgba(0, 0, 0, 0);
2753
+ }
2754
+
2755
+ [dir="rtl"] .cirth progress:indeterminate {
2756
+ animation-direction: reverse;
2757
+ }
2758
+ }
2759
+
2760
+ @keyframes progress-indeterminate {
2761
+ 0% {
2762
+ background-position: 200% 0;
2763
+ }
2764
+
2765
+ 100% {
2766
+ background-position: -200% 0;
2767
+ }
2768
+ }
2769
+
2770
+ .cirth [data-tooltip] {
2771
+ position: relative;
2772
+ }
2773
+
2774
+ .cirth [data-tooltip]:not(:is(a, button, input, [role="button"])) {
2775
+ cursor: help;
2776
+ border-bottom: 1px dotted;
2777
+ text-decoration: none;
2778
+ }
2779
+
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);
2801
+ }
2802
+
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%);
2813
+ }
2814
+
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);
2819
+ }
2820
+
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);
2825
+ }
2826
+
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%);
2830
+ }
2831
+
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%);
2836
+ }
2837
+
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%);
2841
+ }
2842
+
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%);
2847
+ }
2848
+
2849
+ .cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
2850
+ opacity: 1;
2851
+ }
2852
+
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
+ }
2862
+
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
+ }
2868
+
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
+ }
2874
+
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
+ }
2880
+
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
+ }
2886
+
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
+ }
2892
+
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
+ }
2898
+
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
+ }
2904
+ }
2905
+
2906
+ @keyframes tooltip-slide {
2907
+ to {
2908
+ transform: var(--cirth-tooltip-slide-to);
2909
+ opacity: 1;
2910
+ }
2911
+ }
2912
+
2913
+ @keyframes tooltip-caret-slide {
2914
+ 50% {
2915
+ opacity: 0;
2916
+ }
2917
+
2918
+ to {
2919
+ transform: var(--cirth-tooltip-caret-slide-to);
2920
+ opacity: 1;
2921
+ }
2922
+ }
2923
+
2924
+ .cirth [aria-controls] {
2925
+ cursor: pointer;
2926
+ }
2927
+
2928
+ .cirth [aria-disabled="true"], .cirth [disabled] {
2929
+ cursor: not-allowed;
2930
+ }
2931
+
2932
+ .cirth [aria-hidden="false"][hidden] {
2933
+ display: initial;
2934
+ }
2935
+
2936
+ .cirth [aria-hidden="false"][hidden]:not(:focus) {
2937
+ clip: rect(0, 0, 0, 0);
2938
+ position: absolute;
2939
+ }
2940
+
2941
+ .cirth a, .cirth area, .cirth button, .cirth input, .cirth label, .cirth select, .cirth summary, .cirth textarea, .cirth [tabindex] {
2942
+ -ms-touch-action: manipulation;
2943
+ }
2944
+
2945
+ .cirth [dir="rtl"] {
2946
+ direction: rtl;
2947
+ }
2948
+
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
+ }
2959
+ }