@cirthcss/cirth 0.2.0 → 0.4.0

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