@cirthcss/cirth 0.2.0 → 0.4.0

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