@cirthcss/cirth 0.2.0 → 0.3.0

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