@cirthcss/cirth 0.2.0 → 0.3.0

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