@cirthcss/cirth 0.2.0

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