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