@geckoui/geckoui 1.2.0-beta.1 → 1.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 (8) hide show
  1. package/dist/index.css +3237 -12
  2. package/dist/index.d.mts +123 -208
  3. package/dist/index.d.ts +123 -208
  4. package/dist/index.js +585 -557
  5. package/dist/index.mjs +606 -578
  6. package/dist/styles.css +1516 -1726
  7. package/package.json +15 -23
  8. package/README.md +0 -157
package/dist/index.css CHANGED
@@ -1,16 +1,3241 @@
1
1
  /* src/components/RHF/RHFCounterInput/RHFCounterInput.scss */
2
- .GeckoUIRHFCounterInput--error .GeckoUICounterInput__button,
3
- .GeckoUIRHFCounterInput--error .GeckoUICounterInput__input {
4
- --tw-border-opacity: 1;
5
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2
+ @layer properties;
3
+ .GeckoUI-icon__check {
4
+ box-sizing: border-box;
5
+ border-width: 0;
6
+ border-style: solid;
7
+ border-color: #e5e7eb;
8
+ display: inline-block;
9
+ height: calc(var(--spacing, 0.25rem) * 4);
10
+ width: calc(var(--spacing, 0.25rem) * 4);
11
+ background-color: var(--color-text-primary);
12
+ mask-position: center;
13
+ mask-size: contain;
14
+ mask-repeat: no-repeat;
15
+ mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
16
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
6
17
  }
7
- .GeckoUIRHFCounterInput--error:hover .GeckoUICounterInput__button,
8
- .GeckoUIRHFCounterInput--error:hover .GeckoUICounterInput__input {
9
- --tw-border-opacity: 1;
10
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
18
+ .GeckoUI-icon__arrow-down {
19
+ box-sizing: border-box;
20
+ border-width: 0;
21
+ border-style: solid;
22
+ border-color: #e5e7eb;
23
+ display: inline-block;
24
+ height: calc(var(--spacing, 0.25rem) * 4);
25
+ width: calc(var(--spacing, 0.25rem) * 4);
26
+ background-color: var(--color-text-primary);
27
+ mask-position: center;
28
+ mask-size: contain;
29
+ mask-repeat: no-repeat;
30
+ mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
31
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
11
32
  }
12
- .GeckoUIRHFCounterInput--error:focus-within .GeckoUICounterInput__button,
13
- .GeckoUIRHFCounterInput--error:focus-within .GeckoUICounterInput__input {
14
- --tw-border-opacity: 1;
15
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
33
+ .GeckoUI-icon__arrow-right {
34
+ box-sizing: border-box;
35
+ border-width: 0;
36
+ border-style: solid;
37
+ border-color: #e5e7eb;
38
+ display: inline-block;
39
+ height: calc(var(--spacing, 0.25rem) * 4);
40
+ width: calc(var(--spacing, 0.25rem) * 4);
41
+ background-color: var(--color-text-primary);
42
+ mask-position: center;
43
+ mask-size: contain;
44
+ mask-repeat: no-repeat;
45
+ mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
46
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
16
47
  }
48
+ .GeckoUI-icon__clear {
49
+ box-sizing: border-box;
50
+ border-width: 0;
51
+ border-style: solid;
52
+ border-color: #e5e7eb;
53
+ display: inline-block;
54
+ height: calc(var(--spacing, 0.25rem) * 4);
55
+ width: calc(var(--spacing, 0.25rem) * 4);
56
+ background-color: var(--color-text-primary);
57
+ mask-position: center;
58
+ mask-size: contain;
59
+ mask-repeat: no-repeat;
60
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
61
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
62
+ }
63
+ .GeckoUI-icon__check {
64
+ box-sizing: border-box;
65
+ border-width: 0;
66
+ border-style: solid;
67
+ border-color: #e5e7eb;
68
+ display: inline-block;
69
+ height: calc(var(--spacing, 0.25rem) * 4);
70
+ width: calc(var(--spacing, 0.25rem) * 4);
71
+ background-color: var(--color-text-primary);
72
+ mask-position: center;
73
+ mask-size: contain;
74
+ mask-repeat: no-repeat;
75
+ mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
76
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
77
+ }
78
+ .GeckoUI-icon__arrow-down {
79
+ box-sizing: border-box;
80
+ border-width: 0;
81
+ border-style: solid;
82
+ border-color: #e5e7eb;
83
+ display: inline-block;
84
+ height: calc(var(--spacing, 0.25rem) * 4);
85
+ width: calc(var(--spacing, 0.25rem) * 4);
86
+ background-color: var(--color-text-primary);
87
+ mask-position: center;
88
+ mask-size: contain;
89
+ mask-repeat: no-repeat;
90
+ mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
91
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
92
+ }
93
+ .GeckoUI-icon__arrow-right {
94
+ box-sizing: border-box;
95
+ border-width: 0;
96
+ border-style: solid;
97
+ border-color: #e5e7eb;
98
+ display: inline-block;
99
+ height: calc(var(--spacing, 0.25rem) * 4);
100
+ width: calc(var(--spacing, 0.25rem) * 4);
101
+ background-color: var(--color-text-primary);
102
+ mask-position: center;
103
+ mask-size: contain;
104
+ mask-repeat: no-repeat;
105
+ mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
106
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
107
+ }
108
+ .GeckoUI-icon__clear {
109
+ box-sizing: border-box;
110
+ border-width: 0;
111
+ border-style: solid;
112
+ border-color: #e5e7eb;
113
+ display: inline-block;
114
+ height: calc(var(--spacing, 0.25rem) * 4);
115
+ width: calc(var(--spacing, 0.25rem) * 4);
116
+ background-color: var(--color-text-primary);
117
+ mask-position: center;
118
+ mask-size: contain;
119
+ mask-repeat: no-repeat;
120
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
121
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
122
+ }
123
+ .GeckoUIMenu {
124
+ position: relative;
125
+ display: inline-block;
126
+ }
127
+ .GeckoUIMenu__button {
128
+ box-sizing: border-box;
129
+ border-width: 0;
130
+ border-style: solid;
131
+ border-color: #e5e7eb;
132
+ font-family: inherit;
133
+ font-feature-settings: inherit;
134
+ font-variation-settings: inherit;
135
+ font-size: 100%;
136
+ font-weight: inherit;
137
+ line-height: inherit;
138
+ letter-spacing: inherit;
139
+ color: inherit;
140
+ margin: 0;
141
+ padding: 0;
142
+ text-transform: none;
143
+ -webkit-appearance: button;
144
+ cursor: pointer;
145
+ background-color: transparent;
146
+ background-image: none;
147
+ display: flex;
148
+ align-items: center;
149
+ gap: calc(var(--spacing, 0.25rem) * 2);
150
+ border-radius: var(--radius-md, 0.375rem);
151
+ border-style: var(--tw-border-style);
152
+ border-width: 1px;
153
+ border-color: var(--color-border-secondary);
154
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
155
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
156
+ font-size: var(--text-sm, 0.875rem);
157
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
158
+ color: var(--color-text-secondary);
159
+ &:enabled {
160
+ &:hover {
161
+ @media (hover: hover) {
162
+ background-color: var(--color-surface-hover);
163
+ }
164
+ }
165
+ }
166
+ &:disabled {
167
+ cursor: not-allowed;
168
+ }
169
+ &:disabled {
170
+ color: var(--color-text-disabled);
171
+ }
172
+ }
173
+ .GeckoUIMenu__items {
174
+ box-sizing: border-box;
175
+ border-width: 0;
176
+ border-style: solid;
177
+ border-color: #e5e7eb;
178
+ scrollbar-width: thin;
179
+ scrollbar-color: var(--gecko-ui-scrollbar-thumb) transparent;
180
+ scrollbar-gutter: auto;
181
+ }
182
+ .GeckoUIMenu__items -webkit-scrollbar {
183
+ width: 6px;
184
+ }
185
+ .GeckoUIMenu__items -webkit-scrollbar-track {
186
+ background: transparent;
187
+ }
188
+ .GeckoUIMenu__items -webkit-scrollbar-thumb {
189
+ background: var(--gecko-ui-scrollbar-thumb);
190
+ }
191
+ .GeckoUIMenu__items -webkit-scrollbar-thumb:hover {
192
+ background: var(--gecko-ui-scrollbar-thumb-hover);
193
+ }
194
+ .GeckoUIMenu__items {
195
+ z-index: 50;
196
+ display: flex;
197
+ flex-direction: column;
198
+ justify-content: flex-start;
199
+ border-radius: var(--radius-md, 0.375rem);
200
+ border-style: var(--tw-border-style);
201
+ border-width: 1px;
202
+ border-color: var(--color-border-secondary);
203
+ background-color: var(--color-surface-primary);
204
+ padding: calc(var(--spacing, 0.25rem) * 1);
205
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
206
+ box-shadow:
207
+ var(--tw-inset-shadow),
208
+ var(--tw-inset-ring-shadow),
209
+ var(--tw-ring-offset-shadow),
210
+ var(--tw-ring-shadow),
211
+ var(--tw-shadow);
212
+ --tw-outline-style: none;
213
+ outline-style: none;
214
+ }
215
+ .GeckoUIMenu__scroll-container {
216
+ display: flex;
217
+ max-height: 300px;
218
+ flex-direction: column;
219
+ overflow-y: auto;
220
+ }
221
+ .GeckoUIMenu__item {
222
+ box-sizing: border-box;
223
+ border-width: 0;
224
+ border-style: solid;
225
+ border-color: #e5e7eb;
226
+ font-family: inherit;
227
+ font-feature-settings: inherit;
228
+ font-variation-settings: inherit;
229
+ font-size: 100%;
230
+ font-weight: inherit;
231
+ line-height: inherit;
232
+ letter-spacing: inherit;
233
+ color: inherit;
234
+ margin: 0;
235
+ padding: 0;
236
+ text-transform: none;
237
+ -webkit-appearance: button;
238
+ background-color: transparent;
239
+ background-image: none;
240
+ cursor: pointer;
241
+ border-radius: 0.25rem;
242
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
243
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
244
+ text-align: left;
245
+ font-size: var(--text-sm, 0.875rem);
246
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
247
+ text-wrap: nowrap;
248
+ color: var(--color-text-secondary);
249
+ --tw-outline-style: none;
250
+ outline-style: none;
251
+ }
252
+ .GeckoUIMenu__item:hover,
253
+ .GeckoUIMenu__item:focus {
254
+ background-color: var(--color-surface-hover-strong);
255
+ }
256
+ .GeckoUIMenu__item[data-disabled] {
257
+ cursor: not-allowed;
258
+ color: var(--color-text-disabled);
259
+ }
260
+ .GeckoUIMenu__item[data-disabled]:hover,
261
+ .GeckoUIMenu__item[data-disabled]:focus {
262
+ background-color: transparent;
263
+ }
264
+ .GeckoUIRadio {
265
+ outline: none;
266
+ }
267
+ .GeckoUIRadio:focus-visible {
268
+ outline: 2px solid var(--color-primary-300);
269
+ outline-offset: 2px;
270
+ }
271
+ .GeckoUIRadio {
272
+ position: relative;
273
+ display: inline-flex;
274
+ align-items: center;
275
+ justify-content: center;
276
+ height: calc(var(--spacing, 0.25rem) * 4);
277
+ width: calc(var(--spacing, 0.25rem) * 4);
278
+ cursor: pointer;
279
+ appearance: none;
280
+ border-radius: calc(infinity * 1px);
281
+ background-color: transparent;
282
+ border-style: var(--tw-border-style);
283
+ border-width: 0.1em;
284
+ border-color: var(--color-border-secondary);
285
+ transition-property:
286
+ color,
287
+ background-color,
288
+ border-color,
289
+ outline-color,
290
+ text-decoration-color,
291
+ fill,
292
+ stroke,
293
+ --tw-gradient-from,
294
+ --tw-gradient-via,
295
+ --tw-gradient-to;
296
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
297
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
298
+ --tw-duration: 120ms;
299
+ transition-duration: 120ms;
300
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
301
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
302
+ }
303
+ .GeckoUIRadio:disabled {
304
+ cursor: not-allowed;
305
+ border-color: var(--color-border-disabled);
306
+ }
307
+ .GeckoUIRadio:enabled:hover {
308
+ border-color: var(--color-primary-400);
309
+ }
310
+ .GeckoUIRadio:checked {
311
+ border-color: var(--color-primary-600);
312
+ background-color: transparent;
313
+ border-width: 0.1em;
314
+ }
315
+ .GeckoUIRadio:disabled:checked {
316
+ border-color: color-mix(in srgb, oklch(0.5461 0.2152 262.88) 50%, transparent);
317
+ @supports (color: color-mix(in lab, red, red)) {
318
+ border-color: color-mix(in oklab, var(--color-primary-600) 50%, transparent);
319
+ }
320
+ }
321
+ .GeckoUIRadio:disabled:checked:after {
322
+ box-shadow: inset 1em 1em color-mix(in srgb, oklch(0.5461 0.2152 262.88) 50%, transparent);
323
+ @supports (color: color-mix(in lab, red, red)) {
324
+ box-shadow: inset 1em 1em color-mix(in oklch, var(--color-primary-600) 50%, transparent);
325
+ }
326
+ }
327
+ .GeckoUIRadio:after {
328
+ content: "";
329
+ position: absolute;
330
+ height: 0.5em;
331
+ width: 0.5em;
332
+ border-radius: calc(infinity * 1px);
333
+ --tw-scale-x: 0%;
334
+ --tw-scale-y: 0%;
335
+ --tw-scale-z: 0%;
336
+ scale: var(--tw-scale-x) var(--tw-scale-y);
337
+ transition-property:
338
+ transform,
339
+ translate,
340
+ scale,
341
+ rotate;
342
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
343
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
344
+ --tw-duration: 120ms;
345
+ transition-duration: 120ms;
346
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
347
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
348
+ box-shadow: inset 1em 1em var(--color-primary-600);
349
+ }
350
+ .GeckoUIRadio:checked:after {
351
+ --tw-scale-x: 100%;
352
+ --tw-scale-y: 100%;
353
+ --tw-scale-z: 100%;
354
+ scale: var(--tw-scale-x) var(--tw-scale-y);
355
+ box-shadow: inset 1em 1em var(--color-primary-600);
356
+ }
357
+ .GeckoUILabel {
358
+ box-sizing: border-box;
359
+ border-width: 0;
360
+ border-style: solid;
361
+ border-color: #e5e7eb;
362
+ display: flex;
363
+ min-height: 24px;
364
+ width: auto;
365
+ align-items: center;
366
+ gap: calc(var(--spacing, 0.25rem) * 1);
367
+ font-size: var(--text-sm, 0.875rem);
368
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
369
+ --tw-font-weight: var(--font-weight-medium, 500);
370
+ font-weight: var(--font-weight-medium, 500);
371
+ color: var(--color-text-muted);
372
+ }
373
+ .GeckoUILabel__required-indicator {
374
+ color: var(--color-red-400, oklch(70.4% 0.191 22.216));
375
+ }
376
+ .GeckoUILabel__tooltip-icon {
377
+ box-sizing: border-box;
378
+ border-width: 0;
379
+ border-style: solid;
380
+ border-color: #e5e7eb;
381
+ display: inline-block;
382
+ height: calc(var(--spacing, 0.25rem) * 4);
383
+ width: calc(var(--spacing, 0.25rem) * 4);
384
+ background-color: var(--color-text-primary);
385
+ mask-position: center;
386
+ mask-size: contain;
387
+ mask-repeat: no-repeat;
388
+ mask-image: url('data:image/svg+xml,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z" clip-rule="evenodd"/></svg>');
389
+ -webkit-mask-image: url('data:image/svg+xml,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z" clip-rule="evenodd"/></svg>');
390
+ }
391
+ .GeckoUIInput {
392
+ box-sizing: border-box;
393
+ border-width: 0;
394
+ border-style: solid;
395
+ border-color: #e5e7eb;
396
+ position: relative;
397
+ display: flex;
398
+ min-height: calc(var(--spacing, 0.25rem) * 10);
399
+ width: 100%;
400
+ align-items: center;
401
+ gap: calc(var(--spacing, 0.25rem) * 2);
402
+ border-radius: var(--radius-md, 0.375rem);
403
+ border-style: var(--tw-border-style);
404
+ border-width: 1px;
405
+ border-color: var(--color-border-secondary);
406
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
407
+ }
408
+ .GeckoUIInput:has(input:-webkit-autofill) {
409
+ background: var(--color-surface-autofill) !important;
410
+ }
411
+ .GeckoUIInput[data-state=disabled] {
412
+ cursor: not-allowed;
413
+ background-color: var(--color-surface-disabled);
414
+ color: var(--color-text-disabled);
415
+ }
416
+ .GeckoUIInput[data-state=enabled] {
417
+ cursor: text;
418
+ }
419
+ .GeckoUIInput[data-state=enabled]:focus-within {
420
+ border-color: var(--color-primary-400);
421
+ }
422
+ .GeckoUIInput[data-state=enabled]:hover {
423
+ border-color: var(--color-primary-400);
424
+ }
425
+ .GeckoUIInput__input {
426
+ box-sizing: border-box;
427
+ border-width: 0;
428
+ border-style: solid;
429
+ border-color: #e5e7eb;
430
+ font-family: inherit;
431
+ font-feature-settings: inherit;
432
+ font-variation-settings: inherit;
433
+ font-size: 100%;
434
+ font-weight: inherit;
435
+ line-height: inherit;
436
+ letter-spacing: inherit;
437
+ color: inherit;
438
+ margin: 0;
439
+ padding: 0;
440
+ text-transform: none;
441
+ width: 100%;
442
+ flex: 1;
443
+ align-self: stretch;
444
+ background-color: transparent;
445
+ font-size: var(--text-sm, 0.875rem);
446
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
447
+ --tw-outline-style: none;
448
+ outline-style: none;
449
+ &::placeholder {
450
+ font-size: var(--text-sm, 0.875rem);
451
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
452
+ }
453
+ &::placeholder {
454
+ color: var(--color-text-placeholder);
455
+ }
456
+ &:disabled {
457
+ cursor: not-allowed;
458
+ }
459
+ }
460
+ .GeckoUIAlert {
461
+ box-sizing: border-box;
462
+ border-width: 0;
463
+ border-style: solid;
464
+ border-color: #e5e7eb;
465
+ display: flex;
466
+ flex-direction: column;
467
+ gap: calc(var(--spacing, 0.25rem) * 0.5);
468
+ border-radius: var(--radius-lg, 0.5rem);
469
+ border-style: var(--tw-border-style);
470
+ border-width: 1px;
471
+ border-color: var(--color-border-primary);
472
+ background-color: var(--color-surface-primary);
473
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
474
+ padding-block: calc(var(--spacing, 0.25rem) * 3);
475
+ }
476
+ .GeckoUIAlert[data-variant=error] {
477
+ color: var(--color-red-500, oklch(63.7% 0.237 25.331));
478
+ }
479
+ .GeckoUIAlert[data-variant=warning] {
480
+ color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
481
+ }
482
+ .GeckoUIAlert[data-variant=info] {
483
+ color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
484
+ }
485
+ .GeckoUIAlert[data-variant=success] {
486
+ color: var(--color-green-500, oklch(72.3% 0.219 149.579));
487
+ }
488
+ .GeckoUIAlert[data-variant=default] {
489
+ color: var(--color-text-primary);
490
+ }
491
+ .GeckoUIAlert[data-condensed] {
492
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
493
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
494
+ }
495
+ .GeckoUIAlert__icon {
496
+ box-sizing: border-box;
497
+ border-width: 0;
498
+ border-style: solid;
499
+ border-color: #e5e7eb;
500
+ display: inline-block;
501
+ background-color: var(--color-text-primary);
502
+ mask-position: center;
503
+ mask-size: contain;
504
+ mask-repeat: no-repeat;
505
+ height: calc(var(--spacing, 0.25rem) * 4);
506
+ width: calc(var(--spacing, 0.25rem) * 4);
507
+ }
508
+ .GeckoUIAlert__icon[data-variant=error] {
509
+ background-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
510
+ mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.28033 5.21967C5.98744 4.92678 5.51256 4.92678 5.21967 5.21967C4.92678 5.51256 4.92678 5.98744 5.21967 6.28033L6.93934 8L5.21967 9.71967C4.92678 10.0126 4.92678 10.4874 5.21967 10.7803C5.51256 11.0732 5.98744 11.0732 6.28033 10.7803L8 9.06066L9.71967 10.7803C10.0126 11.0732 10.4874 11.0732 10.7803 10.7803C11.0732 10.4874 11.0732 10.0126 10.7803 9.71967L9.06066 8L10.7803 6.28033C11.0732 5.98744 11.0732 5.51256 10.7803 5.21967C10.4874 4.92678 10.0126 4.92678 9.71967 5.21967L8 6.93934L6.28033 5.21967Z" fill="%23F87171"/></svg>');
511
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.28033 5.21967C5.98744 4.92678 5.51256 4.92678 5.21967 5.21967C4.92678 5.51256 4.92678 5.98744 5.21967 6.28033L6.93934 8L5.21967 9.71967C4.92678 10.0126 4.92678 10.4874 5.21967 10.7803C5.51256 11.0732 5.98744 11.0732 6.28033 10.7803L8 9.06066L9.71967 10.7803C10.0126 11.0732 10.4874 11.0732 10.7803 10.7803C11.0732 10.4874 11.0732 10.0126 10.7803 9.71967L9.06066 8L10.7803 6.28033C11.0732 5.98744 11.0732 5.51256 10.7803 5.21967C10.4874 4.92678 10.0126 4.92678 9.71967 5.21967L8 6.93934L6.28033 5.21967Z" fill="%23F87171"/></svg>');
512
+ }
513
+ .GeckoUIAlert__icon[data-variant=warning] {
514
+ background-color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
515
+ mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.41421 3 8.75 3.33579 8.75 3.75V8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25V3.75C7.25 3.33579 7.58579 3 8 3ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13Z" fill="%23FACC15"/></svg>');
516
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.41421 3 8.75 3.33579 8.75 3.75V8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25V3.75C7.25 3.33579 7.58579 3 8 3ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13Z" fill="%23FACC15"/></svg>');
517
+ }
518
+ .GeckoUIAlert__icon[data-variant=info] {
519
+ background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
520
+ mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 4C9 4.55228 8.55228 5 8 5C7.44771 5 7 4.55228 7 4C7 3.44772 7.44771 3 8 3C8.55228 3 9 3.44772 9 4ZM7 7C6.58579 7 6.25 7.33579 6.25 7.75C6.25 8.16421 6.58579 8.5 7 8.5H7.25338C7.41332 8.5 7.53213 8.6481 7.49743 8.80423L7.03829 10.8704C6.79542 11.9633 7.62706 13 8.74662 13H9C9.41421 13 9.75 12.6642 9.75 12.25C9.75 11.8358 9.41421 11.5 9 11.5H8.74662C8.58668 11.5 8.46787 11.3519 8.50257 11.1958L8.96171 9.12963C9.20458 8.03673 8.37294 7 7.25338 7H7Z" fill="%2355B1F2"/></svg>');
521
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 4C9 4.55228 8.55228 5 8 5C7.44771 5 7 4.55228 7 4C7 3.44772 7.44771 3 8 3C8.55228 3 9 3.44772 9 4ZM7 7C6.58579 7 6.25 7.33579 6.25 7.75C6.25 8.16421 6.58579 8.5 7 8.5H7.25338C7.41332 8.5 7.53213 8.6481 7.49743 8.80423L7.03829 10.8704C6.79542 11.9633 7.62706 13 8.74662 13H9C9.41421 13 9.75 12.6642 9.75 12.25C9.75 11.8358 9.41421 11.5 9 11.5H8.74662C8.58668 11.5 8.46787 11.3519 8.50257 11.1958L8.96171 9.12963C9.20458 8.03673 8.37294 7 7.25338 7H7Z" fill="%2355B1F2"/></svg>');
522
+ }
523
+ .GeckoUIAlert__icon[data-variant=success] {
524
+ background-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
525
+ mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.8566 6.19113C12.1002 5.85614 12.0261 5.38708 11.6911 5.14345C11.3561 4.89982 10.8871 4.97388 10.6434 5.30887L7.15969 10.099L5.28033 8.21967C4.98744 7.92678 4.51256 7.92678 4.21967 8.21967C3.92678 8.51256 3.92678 8.98744 4.21967 9.28033L6.71967 11.7803C6.87477 11.9354 7.08999 12.0149 7.30867 11.9977C7.52734 11.9805 7.72754 11.8685 7.85655 11.6911L11.8566 6.19113Z" fill="%2322C55E"/></svg>');
526
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.8566 6.19113C12.1002 5.85614 12.0261 5.38708 11.6911 5.14345C11.3561 4.89982 10.8871 4.97388 10.6434 5.30887L7.15969 10.099L5.28033 8.21967C4.98744 7.92678 4.51256 7.92678 4.21967 8.21967C3.92678 8.51256 3.92678 8.98744 4.21967 9.28033L6.71967 11.7803C6.87477 11.9354 7.08999 12.0149 7.30867 11.9977C7.52734 11.9805 7.72754 11.8685 7.85655 11.6911L11.8566 6.19113Z" fill="%2322C55E"/></svg>');
527
+ }
528
+ .GeckoUIAlert__icon[data-variant=default] {
529
+ background-color: var(--color-text-primary);
530
+ mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3996 6.99961C13.3996 10.5342 10.5342 13.3996 6.99961 13.3996C3.46499 13.3996 0.599609 10.5342 0.599609 6.99961C0.599609 3.46499 3.46499 0.599609 6.99961 0.599609C10.5342 0.599609 13.3996 3.46499 13.3996 6.99961ZM6.99961 2.99961C7.33098 2.99961 7.59961 3.26824 7.59961 3.59961V7.19961C7.59961 7.53098 7.33098 7.79961 6.99961 7.79961C6.66824 7.79961 6.39961 7.53098 6.39961 7.19961V3.59961C6.39961 3.26824 6.66824 2.99961 6.99961 2.99961ZM6.99961 10.9996C7.44144 10.9996 7.79961 10.6414 7.79961 10.1996C7.79961 9.75778 7.44144 9.39961 6.99961 9.39961C6.55778 9.39961 6.19961 9.75778 6.19961 10.1996C6.19961 10.6414 6.55778 10.9996 6.99961 10.9996Z" fill="%23DC2626"/></svg>');
531
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3996 6.99961C13.3996 10.5342 10.5342 13.3996 6.99961 13.3996C3.46499 13.3996 0.599609 10.5342 0.599609 6.99961C0.599609 3.46499 3.46499 0.599609 6.99961 0.599609C10.5342 0.599609 13.3996 3.46499 13.3996 6.99961ZM6.99961 2.99961C7.33098 2.99961 7.59961 3.26824 7.59961 3.59961V7.19961C7.59961 7.53098 7.33098 7.79961 6.99961 7.79961C6.66824 7.79961 6.39961 7.53098 6.39961 7.19961V3.59961C6.39961 3.26824 6.66824 2.99961 6.99961 2.99961ZM6.99961 10.9996C7.44144 10.9996 7.79961 10.6414 7.79961 10.1996C7.79961 9.75778 7.44144 9.39961 6.99961 9.39961C6.55778 9.39961 6.19961 9.75778 6.19961 10.1996C6.19961 10.6414 6.55778 10.9996 6.99961 10.9996Z" fill="%23DC2626"/></svg>');
532
+ }
533
+ .GeckoUIAlert[data-condensed] .GeckoUIAlert__icon {
534
+ height: calc(var(--spacing, 0.25rem) * 3.5);
535
+ width: calc(var(--spacing, 0.25rem) * 3.5);
536
+ }
537
+ .GeckoUIAlert__body {
538
+ display: flex;
539
+ align-items: center;
540
+ gap: calc(var(--spacing, 0.25rem) * 3);
541
+ }
542
+ .GeckoUIAlert__title {
543
+ flex: 1;
544
+ font-size: var(--text-sm, 0.875rem);
545
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
546
+ color: inherit;
547
+ }
548
+ .GeckoUIAlert__remove-button {
549
+ box-sizing: border-box;
550
+ border-width: 0;
551
+ border-style: solid;
552
+ border-color: #e5e7eb;
553
+ font-family: inherit;
554
+ font-feature-settings: inherit;
555
+ font-variation-settings: inherit;
556
+ font-size: 100%;
557
+ font-weight: inherit;
558
+ line-height: inherit;
559
+ letter-spacing: inherit;
560
+ color: inherit;
561
+ margin: 0;
562
+ padding: 0;
563
+ text-transform: none;
564
+ -webkit-appearance: button;
565
+ cursor: pointer;
566
+ background-image: none;
567
+ margin-left: auto;
568
+ width: fit-content;
569
+ background-color: transparent;
570
+ padding: calc(var(--spacing, 0.25rem) * 0);
571
+ }
572
+ .GeckoUIAlert__remove-button__icon {
573
+ box-sizing: border-box;
574
+ border-width: 0;
575
+ border-style: solid;
576
+ border-color: #e5e7eb;
577
+ height: calc(var(--spacing, 0.25rem) * 4);
578
+ width: calc(var(--spacing, 0.25rem) * 4);
579
+ background-color: var(--color-text-primary);
580
+ mask-position: center;
581
+ mask-size: contain;
582
+ mask-repeat: no-repeat;
583
+ display: inline-block;
584
+ height: calc(var(--spacing, 0.25rem) * 2.5);
585
+ width: calc(var(--spacing, 0.25rem) * 2.5);
586
+ background-color: var(--color-text-muted);
587
+ mask-image: url('data:image/svg+xml,<svg fill="currentColor" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L3.93934 5L0.21967 8.71967C-0.0732233 9.01256 -0.0732233 9.48744 0.21967 9.78033C0.512563 10.0732 0.987437 10.0732 1.28033 9.78033L5 6.06066L8.71967 9.78033C9.01256 10.0732 9.48744 10.0732 9.78033 9.78033C10.0732 9.48744 10.0732 9.01256 9.78033 8.71967L6.06066 5L9.78033 1.28033C10.0732 0.987437 10.0732 0.512563 9.78033 0.21967C9.48744 -0.0732233 9.01256 -0.0732233 8.71967 0.21967L5 3.93934L1.28033 0.21967Z" fill="currentColor"></path></svg>');
588
+ -webkit-mask-image: url('data:image/svg+xml,<svg fill="currentColor" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L3.93934 5L0.21967 8.71967C-0.0732233 9.01256 -0.0732233 9.48744 0.21967 9.78033C0.512563 10.0732 0.987437 10.0732 1.28033 9.78033L5 6.06066L8.71967 9.78033C9.01256 10.0732 9.48744 10.0732 9.78033 9.78033C10.0732 9.48744 10.0732 9.01256 9.78033 8.71967L6.06066 5L9.78033 1.28033C10.0732 0.987437 10.0732 0.512563 9.78033 0.21967C9.48744 -0.0732233 9.01256 -0.0732233 8.71967 0.21967L5 3.93934L1.28033 0.21967Z" fill="currentColor"></path></svg>');
589
+ }
590
+ .GeckoUIAlert__description {
591
+ padding-left: calc(var(--spacing, 0.25rem) * 7);
592
+ text-align: start;
593
+ font-size: var(--text-xs, 0.75rem);
594
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
595
+ color: var(--color-text-secondary);
596
+ }
597
+ .GeckoUISwitch {
598
+ position: relative;
599
+ display: inline-flex;
600
+ flex-shrink: 0;
601
+ cursor: pointer;
602
+ align-items: center;
603
+ border-radius: calc(infinity * 1px);
604
+ border-style: var(--tw-border-style);
605
+ border-width: 1px;
606
+ border-color: transparent;
607
+ background-color: var(--color-surface-active);
608
+ transition-property:
609
+ color,
610
+ background-color,
611
+ border-color,
612
+ outline-color,
613
+ text-decoration-color,
614
+ fill,
615
+ stroke,
616
+ --tw-gradient-from,
617
+ --tw-gradient-via,
618
+ --tw-gradient-to;
619
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
620
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
621
+ --tw-duration: 200ms;
622
+ transition-duration: 200ms;
623
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
624
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
625
+ }
626
+ .GeckoUISwitch:has(input:checked) {
627
+ background-color: var(--color-primary-600);
628
+ }
629
+ .GeckoUISwitch:has(input:disabled) {
630
+ cursor: not-allowed;
631
+ opacity: 50%;
632
+ }
633
+ .GeckoUISwitch:has(input:focus-visible) {
634
+ outline: 2px solid var(--color-primary-300);
635
+ outline-offset: 2px;
636
+ }
637
+ .GeckoUISwitch:has(input:hover) {
638
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
639
+ box-shadow:
640
+ var(--tw-inset-shadow),
641
+ var(--tw-inset-ring-shadow),
642
+ var(--tw-ring-offset-shadow),
643
+ var(--tw-ring-shadow),
644
+ var(--tw-shadow);
645
+ --tw-ring-color: var(--color-primary-400);
646
+ }
647
+ .GeckoUISwitch[data-size=sm] {
648
+ height: calc(var(--spacing, 0.25rem) * 4);
649
+ width: calc(var(--spacing, 0.25rem) * 7);
650
+ }
651
+ .GeckoUISwitch[data-size=md] {
652
+ height: calc(var(--spacing, 0.25rem) * 6);
653
+ width: calc(var(--spacing, 0.25rem) * 11);
654
+ }
655
+ .GeckoUISwitch:hover {
656
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
657
+ box-shadow:
658
+ var(--tw-inset-shadow),
659
+ var(--tw-inset-ring-shadow),
660
+ var(--tw-ring-offset-shadow),
661
+ var(--tw-ring-shadow),
662
+ var(--tw-shadow);
663
+ --tw-ring-color: var(--color-primary-400);
664
+ }
665
+ .GeckoUISwitch:has(input:disabled):hover {
666
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
667
+ box-shadow:
668
+ var(--tw-inset-shadow),
669
+ var(--tw-inset-ring-shadow),
670
+ var(--tw-ring-offset-shadow),
671
+ var(--tw-ring-shadow),
672
+ var(--tw-shadow);
673
+ }
674
+ .GeckoUISwitch__input {
675
+ position: absolute;
676
+ width: 1px;
677
+ height: 1px;
678
+ padding: 0;
679
+ margin: -1px;
680
+ overflow: hidden;
681
+ clip-path: inset(50%);
682
+ white-space: nowrap;
683
+ border-width: 0;
684
+ }
685
+ .GeckoUISwitch__thumb {
686
+ pointer-events: none;
687
+ display: inline-block;
688
+ aspect-ratio: 1 / 1;
689
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
690
+ border-radius: calc(infinity * 1px);
691
+ background-color: var(--color-surface-primary);
692
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
693
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
694
+ box-shadow:
695
+ var(--tw-inset-shadow),
696
+ var(--tw-inset-ring-shadow),
697
+ var(--tw-ring-offset-shadow),
698
+ var(--tw-ring-shadow),
699
+ var(--tw-shadow);
700
+ transition-property:
701
+ color,
702
+ background-color,
703
+ border-color,
704
+ outline-color,
705
+ text-decoration-color,
706
+ fill,
707
+ stroke,
708
+ --tw-gradient-from,
709
+ --tw-gradient-via,
710
+ --tw-gradient-to,
711
+ opacity,
712
+ box-shadow,
713
+ transform,
714
+ translate,
715
+ scale,
716
+ rotate,
717
+ filter,
718
+ -webkit-backdrop-filter,
719
+ backdrop-filter,
720
+ display,
721
+ content-visibility,
722
+ overlay,
723
+ pointer-events;
724
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
725
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
726
+ --tw-duration: 200ms;
727
+ transition-duration: 200ms;
728
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
729
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
730
+ }
731
+ .GeckoUISwitch__thumb[data-size=sm] {
732
+ width: calc(var(--spacing, 0.25rem) * 3.5);
733
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 0);
734
+ translate: var(--tw-translate-x) var(--tw-translate-y);
735
+ }
736
+ .GeckoUISwitch__thumb[data-size=md] {
737
+ width: calc(var(--spacing, 0.25rem) * 5);
738
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 0.5);
739
+ translate: var(--tw-translate-x) var(--tw-translate-y);
740
+ }
741
+ .GeckoUISwitch:has(input:checked) .GeckoUISwitch__thumb[data-size=sm] {
742
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 3);
743
+ translate: var(--tw-translate-x) var(--tw-translate-y);
744
+ }
745
+ .GeckoUISwitch:has(input:checked) .GeckoUISwitch__thumb[data-size=md] {
746
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 5);
747
+ translate: var(--tw-translate-x) var(--tw-translate-y);
748
+ }
749
+ .GeckoUIDrawer {
750
+ position: relative;
751
+ z-index: 50;
752
+ }
753
+ .GeckoUIDrawer__backdrop {
754
+ position: fixed;
755
+ inset: calc(var(--spacing, 0.25rem) * 0);
756
+ cursor: pointer;
757
+ transition-property:
758
+ color,
759
+ background-color,
760
+ border-color,
761
+ outline-color,
762
+ text-decoration-color,
763
+ fill,
764
+ stroke,
765
+ --tw-gradient-from,
766
+ --tw-gradient-via,
767
+ --tw-gradient-to,
768
+ opacity,
769
+ box-shadow,
770
+ transform,
771
+ translate,
772
+ scale,
773
+ rotate,
774
+ filter,
775
+ -webkit-backdrop-filter,
776
+ backdrop-filter,
777
+ display,
778
+ content-visibility,
779
+ overlay,
780
+ pointer-events;
781
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
782
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
783
+ --tw-duration: 300ms;
784
+ transition-duration: 300ms;
785
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
786
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
787
+ }
788
+ .GeckoUIDrawer__backdrop[data-state=hidden],
789
+ .GeckoUIDrawer__backdrop[data-clickthrough] {
790
+ pointer-events: none;
791
+ }
792
+ .GeckoUIDrawer__backdrop[data-state=visible] {
793
+ background-color: color-mix(in srgb, oklch(0 0 none) 75%, transparent);
794
+ @supports (color: color-mix(in lab, red, red)) {
795
+ background-color: color-mix(in oklab, var(--color-surface-overlay) 75%, transparent);
796
+ }
797
+ opacity: 100%;
798
+ }
799
+ .GeckoUIDrawer__backdrop[data-state=hidden] {
800
+ opacity: 0%;
801
+ }
802
+ .GeckoUIDrawer__drawer {
803
+ pointer-events: auto;
804
+ position: fixed;
805
+ height: 100%;
806
+ width: 100%;
807
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
808
+ overflow-y: auto;
809
+ background-color: var(--color-surface-primary);
810
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
811
+ box-shadow:
812
+ var(--tw-inset-shadow),
813
+ var(--tw-inset-ring-shadow),
814
+ var(--tw-ring-offset-shadow),
815
+ var(--tw-ring-shadow),
816
+ var(--tw-shadow);
817
+ transition-property:
818
+ color,
819
+ background-color,
820
+ border-color,
821
+ outline-color,
822
+ text-decoration-color,
823
+ fill,
824
+ stroke,
825
+ --tw-gradient-from,
826
+ --tw-gradient-via,
827
+ --tw-gradient-to,
828
+ opacity,
829
+ box-shadow,
830
+ transform,
831
+ translate,
832
+ scale,
833
+ rotate,
834
+ filter,
835
+ -webkit-backdrop-filter,
836
+ backdrop-filter,
837
+ display,
838
+ content-visibility,
839
+ overlay,
840
+ pointer-events;
841
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
842
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
843
+ --tw-duration: 300ms;
844
+ transition-duration: 300ms;
845
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
846
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
847
+ }
848
+ .GeckoUIDrawer__drawer[data-placement=right] {
849
+ inset-block: calc(var(--spacing, 0.25rem) * 0);
850
+ right: calc(var(--spacing, 0.25rem) * 0);
851
+ max-width: var(--container-md, 28rem);
852
+ }
853
+ .GeckoUIDrawer__drawer[data-placement=left] {
854
+ inset-block: calc(var(--spacing, 0.25rem) * 0);
855
+ left: calc(var(--spacing, 0.25rem) * 0);
856
+ max-width: var(--container-md, 28rem);
857
+ }
858
+ .GeckoUIDrawer__drawer[data-placement=top] {
859
+ inset-inline: calc(var(--spacing, 0.25rem) * 0);
860
+ top: calc(var(--spacing, 0.25rem) * 0);
861
+ max-height: 50%;
862
+ }
863
+ .GeckoUIDrawer__drawer[data-placement=bottom] {
864
+ inset-inline: calc(var(--spacing, 0.25rem) * 0);
865
+ bottom: calc(var(--spacing, 0.25rem) * 0);
866
+ max-height: 50%;
867
+ }
868
+ .GeckoUIDrawer__drawer[data-state=closed] {
869
+ transition-delay: 100ms;
870
+ }
871
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=top],
872
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=bottom] {
873
+ --tw-translate-y: calc(var(--spacing, 0.25rem) * 0);
874
+ translate: var(--tw-translate-x) var(--tw-translate-y);
875
+ }
876
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=right],
877
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=left] {
878
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 0);
879
+ translate: var(--tw-translate-x) var(--tw-translate-y);
880
+ }
881
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=right] {
882
+ --tw-translate-x: 100%;
883
+ translate: var(--tw-translate-x) var(--tw-translate-y);
884
+ }
885
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=left] {
886
+ --tw-translate-x: -100%;
887
+ translate: var(--tw-translate-x) var(--tw-translate-y);
888
+ }
889
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=top] {
890
+ --tw-translate-y: -100%;
891
+ translate: var(--tw-translate-x) var(--tw-translate-y);
892
+ }
893
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=bottom] {
894
+ --tw-translate-y: 100%;
895
+ translate: var(--tw-translate-x) var(--tw-translate-y);
896
+ }
897
+ .GeckoUIDialog {
898
+ position: fixed;
899
+ inset: calc(var(--spacing, 0.25rem) * 0);
900
+ z-index: 1000;
901
+ width: 100vw;
902
+ overflow-y: auto;
903
+ }
904
+ .GeckoUIDialog__backdrop {
905
+ display: flex;
906
+ min-height: 100%;
907
+ align-items: center;
908
+ justify-content: center;
909
+ background-color: color-mix(in srgb, oklch(0 0 none) 50%, transparent);
910
+ @supports (color: color-mix(in lab, red, red)) {
911
+ background-color: color-mix(in oklab, var(--color-surface-overlay) 50%, transparent);
912
+ }
913
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
914
+ text-align: center;
915
+ transition-property: opacity;
916
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
917
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
918
+ --tw-duration: 300ms;
919
+ transition-duration: 300ms;
920
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
921
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
922
+ }
923
+ .GeckoUIDialog__dialog {
924
+ position: relative;
925
+ width: 100%;
926
+ max-width: 400px;
927
+ overflow: hidden;
928
+ border-radius: var(--radius-md, 0.375rem);
929
+ background-color: var(--color-surface-primary);
930
+ padding: calc(var(--spacing, 0.25rem) * 6);
931
+ text-align: left;
932
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
933
+ box-shadow:
934
+ var(--tw-inset-shadow),
935
+ var(--tw-inset-ring-shadow),
936
+ var(--tw-ring-offset-shadow),
937
+ var(--tw-ring-shadow),
938
+ var(--tw-shadow);
939
+ transition-property: all;
940
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
941
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
942
+ --tw-duration: 300ms;
943
+ transition-duration: 300ms;
944
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
945
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
946
+ }
947
+ .GeckoUIDialog[data-state=entering] .GeckoUIDialog__backdrop,
948
+ .GeckoUIDialog[data-state=closing] .GeckoUIDialog__backdrop {
949
+ opacity: 0%;
950
+ }
951
+ .GeckoUIDialog[data-state=entering] .GeckoUIDialog__dialog,
952
+ .GeckoUIDialog[data-state=closing] .GeckoUIDialog__dialog {
953
+ --tw-scale-x: 95%;
954
+ --tw-scale-y: 95%;
955
+ --tw-scale-z: 95%;
956
+ scale: var(--tw-scale-x) var(--tw-scale-y);
957
+ opacity: 0%;
958
+ }
959
+ .GeckoUIDialog[data-state=open] .GeckoUIDialog__backdrop {
960
+ opacity: 100%;
961
+ }
962
+ .GeckoUIDialog[data-state=open] .GeckoUIDialog__dialog {
963
+ --tw-scale-x: 100%;
964
+ --tw-scale-y: 100%;
965
+ --tw-scale-z: 100%;
966
+ scale: var(--tw-scale-x) var(--tw-scale-y);
967
+ opacity: 100%;
968
+ }
969
+ .GeckoUIButton {
970
+ box-sizing: border-box;
971
+ border-width: 0;
972
+ border-style: solid;
973
+ border-color: #e5e7eb;
974
+ font-family: inherit;
975
+ font-feature-settings: inherit;
976
+ font-variation-settings: inherit;
977
+ font-size: 100%;
978
+ font-weight: inherit;
979
+ line-height: inherit;
980
+ letter-spacing: inherit;
981
+ color: inherit;
982
+ margin: 0;
983
+ padding: 0;
984
+ text-transform: none;
985
+ -webkit-appearance: button;
986
+ cursor: pointer;
987
+ background-color: transparent;
988
+ background-image: none;
989
+ outline: none;
990
+ }
991
+ .GeckoUIButton:focus-visible {
992
+ outline: 2px solid var(--color-primary-300);
993
+ outline-offset: 2px;
994
+ }
995
+ .GeckoUIButton {
996
+ box-sizing: border-box;
997
+ display: flex;
998
+ flex-direction: row;
999
+ align-items: center;
1000
+ justify-content: center;
1001
+ gap: calc(var(--spacing, 0.25rem) * 1.5);
1002
+ border-radius: var(--radius-md, 0.375rem);
1003
+ font-size: var(--text-xs, 0.75rem);
1004
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1005
+ &:disabled {
1006
+ cursor: not-allowed;
1007
+ }
1008
+ transition-property:
1009
+ transform,
1010
+ translate,
1011
+ scale,
1012
+ rotate;
1013
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
1014
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
1015
+ --tw-duration: 200ms;
1016
+ transition-duration: 200ms;
1017
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
1018
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
1019
+ }
1020
+ .GeckoUIButton:active:not(:disabled):not([data-variant=icon]) {
1021
+ --tw-scale-x: 95%;
1022
+ --tw-scale-y: 95%;
1023
+ --tw-scale-z: 95%;
1024
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1025
+ }
1026
+ .GeckoUIButton[data-size=xs] {
1027
+ height: 26px;
1028
+ padding-inline: calc(var(--spacing, 0.25rem) * 2);
1029
+ font-size: var(--text-xs, 0.75rem);
1030
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1031
+ }
1032
+ .GeckoUIButton[data-size=sm] {
1033
+ height: calc(var(--spacing, 0.25rem) * 8);
1034
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1035
+ font-size: var(--text-xs, 0.75rem);
1036
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1037
+ }
1038
+ .GeckoUIButton[data-size=md] {
1039
+ height: 38px;
1040
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1041
+ font-size: var(--text-sm, 0.875rem);
1042
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1043
+ }
1044
+ .GeckoUIButton[data-size=lg] {
1045
+ height: 44px;
1046
+ padding-inline: calc(var(--spacing, 0.25rem) * 3.5);
1047
+ font-size: var(--text-sm, 0.875rem);
1048
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1049
+ }
1050
+ .GeckoUIButton[data-size=xl] {
1051
+ height: 50px;
1052
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
1053
+ font-size: var(--text-sm, 0.875rem);
1054
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1055
+ --tw-font-weight: var(--font-weight-semibold, 600);
1056
+ font-weight: var(--font-weight-semibold, 600);
1057
+ }
1058
+ .GeckoUIButton[data-variant=filled][data-color=primary] {
1059
+ border-color: var(--color-primary-600);
1060
+ background-color: var(--color-primary-600);
1061
+ color: var(--color-text-on-primary);
1062
+ &:enabled {
1063
+ &:hover {
1064
+ @media (hover: hover) {
1065
+ border-color: var(--color-primary-700);
1066
+ }
1067
+ }
1068
+ }
1069
+ &:enabled {
1070
+ &:hover {
1071
+ @media (hover: hover) {
1072
+ background-color: var(--color-primary-700);
1073
+ }
1074
+ }
1075
+ }
1076
+ &:disabled {
1077
+ border-color: var(--color-border-disabled);
1078
+ }
1079
+ &:disabled {
1080
+ background-color: color-mix(in srgb, oklch(0.5461 0.2152 262.88) 50%, transparent);
1081
+ @supports (color: color-mix(in lab, red, red)) {
1082
+ background-color: color-mix(in oklab, var(--color-primary-600) 50%, transparent);
1083
+ }
1084
+ }
1085
+ }
1086
+ .GeckoUIButton[data-variant=outlined] {
1087
+ border-style: var(--tw-border-style);
1088
+ border-width: 1px;
1089
+ }
1090
+ .GeckoUIButton[data-variant=outlined][data-color=primary] {
1091
+ border-color: var(--color-border-secondary);
1092
+ color: var(--color-text-primary);
1093
+ &:enabled {
1094
+ &:hover {
1095
+ @media (hover: hover) {
1096
+ background-color: var(--color-surface-hover);
1097
+ }
1098
+ }
1099
+ }
1100
+ &:disabled {
1101
+ background-color: var(--color-surface-hover);
1102
+ }
1103
+ &:disabled {
1104
+ color: var(--color-text-disabled);
1105
+ }
1106
+ }
1107
+ .GeckoUIButton[data-variant=ghost] {
1108
+ border-color: transparent;
1109
+ background-color: transparent;
1110
+ &:enabled {
1111
+ --tw-font-weight: var(--font-weight-semibold, 600);
1112
+ font-weight: var(--font-weight-semibold, 600);
1113
+ }
1114
+ }
1115
+ .GeckoUIButton[data-variant=ghost][data-color=primary] {
1116
+ color: var(--color-primary-600);
1117
+ &:enabled {
1118
+ &:hover {
1119
+ @media (hover: hover) {
1120
+ background-color: var(--color-surface-hover);
1121
+ }
1122
+ }
1123
+ }
1124
+ &:disabled {
1125
+ color: var(--color-text-disabled);
1126
+ }
1127
+ }
1128
+ .GeckoUIButton[data-variant=icon] {
1129
+ aspect-ratio: 1 / 1;
1130
+ width: calc(var(--spacing, 0.25rem) * 8);
1131
+ height: calc(var(--spacing, 0.25rem) * 8);
1132
+ border-radius: var(--radius-md, 0.375rem);
1133
+ border-color: transparent;
1134
+ background-color: transparent;
1135
+ padding: calc(var(--spacing, 0.25rem) * 0);
1136
+ &:enabled {
1137
+ &:hover {
1138
+ @media (hover: hover) {
1139
+ background-color: var(--color-surface-hover);
1140
+ }
1141
+ }
1142
+ }
1143
+ }
1144
+ .GeckoUIButton[data-variant=icon][data-color=primary] {
1145
+ color: var(--color-text-tertiary);
1146
+ &:disabled {
1147
+ color: var(--color-text-disabled);
1148
+ }
1149
+ }
1150
+ .GeckoUITooltip__trigger {
1151
+ display: inline-flex;
1152
+ height: fit-content;
1153
+ width: fit-content;
1154
+ cursor: pointer;
1155
+ }
1156
+ .GeckoUITooltip {
1157
+ z-index: 50;
1158
+ max-width: 320px;
1159
+ min-width: 0px;
1160
+ border-radius: var(--radius-lg, 0.5rem);
1161
+ background-color: var(--color-surface-emphasis);
1162
+ padding: calc(var(--spacing, 0.25rem) * 2);
1163
+ font-size: var(--text-xs, 0.75rem);
1164
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1165
+ --tw-font-weight: var(--font-weight-normal, 400);
1166
+ font-weight: var(--font-weight-normal, 400);
1167
+ color: var(--color-surface-primary);
1168
+ box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;
1169
+ user-select: none;
1170
+ }
1171
+ .GeckoUITooltip__arrow {
1172
+ fill: var(--color-surface-emphasis);
1173
+ }
1174
+ .GeckoUISpinnerIcon {
1175
+ box-sizing: border-box;
1176
+ border-width: 0;
1177
+ border-style: solid;
1178
+ border-color: #e5e7eb;
1179
+ aspect-ratio: 1 / 1;
1180
+ width: calc(var(--spacing, 0.25rem) * 5);
1181
+ height: calc(var(--spacing, 0.25rem) * 5);
1182
+ flex-shrink: 0;
1183
+ animation: var(--animate-spin, spin 1s linear infinite);
1184
+ color: inherit;
1185
+ }
1186
+ .GeckoUITextarea {
1187
+ box-sizing: border-box;
1188
+ border-width: 0;
1189
+ border-style: solid;
1190
+ border-color: #e5e7eb;
1191
+ font-family: inherit;
1192
+ font-feature-settings: inherit;
1193
+ font-variation-settings: inherit;
1194
+ font-size: 100%;
1195
+ font-weight: inherit;
1196
+ line-height: inherit;
1197
+ letter-spacing: inherit;
1198
+ color: inherit;
1199
+ margin: 0;
1200
+ padding: 0;
1201
+ text-transform: none;
1202
+ outline: none;
1203
+ }
1204
+ .GeckoUITextarea:focus-visible {
1205
+ outline: 2px solid var(--color-primary-300);
1206
+ outline-offset: 2px;
1207
+ }
1208
+ .GeckoUITextarea {
1209
+ width: 100%;
1210
+ border-radius: var(--radius-md, 0.375rem);
1211
+ border-style: var(--tw-border-style);
1212
+ border-width: 1px;
1213
+ border-color: var(--color-border-secondary);
1214
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1215
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
1216
+ font-size: var(--text-sm, 0.875rem);
1217
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1218
+ &::placeholder {
1219
+ font-size: var(--text-sm, 0.875rem);
1220
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1221
+ }
1222
+ &::placeholder {
1223
+ --tw-leading: calc(var(--spacing, 0.25rem) * 5);
1224
+ line-height: calc(var(--spacing, 0.25rem) * 5);
1225
+ }
1226
+ &::placeholder {
1227
+ --tw-font-weight: var(--font-weight-normal, 400);
1228
+ font-weight: var(--font-weight-normal, 400);
1229
+ }
1230
+ &::placeholder {
1231
+ color: var(--color-text-placeholder);
1232
+ }
1233
+ &:focus {
1234
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1235
+ box-shadow:
1236
+ var(--tw-inset-shadow),
1237
+ var(--tw-inset-ring-shadow),
1238
+ var(--tw-ring-offset-shadow),
1239
+ var(--tw-ring-shadow),
1240
+ var(--tw-shadow);
1241
+ }
1242
+ &:focus {
1243
+ --tw-ring-offset-width: 0px;
1244
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1245
+ }
1246
+ &:focus {
1247
+ --tw-outline-style: none;
1248
+ outline-style: none;
1249
+ }
1250
+ &:enabled {
1251
+ &:hover {
1252
+ @media (hover: hover) {
1253
+ border-color: var(--color-primary-300);
1254
+ }
1255
+ }
1256
+ }
1257
+ &:enabled {
1258
+ &:focus {
1259
+ border-color: var(--color-primary-300);
1260
+ }
1261
+ }
1262
+ &:disabled {
1263
+ cursor: not-allowed;
1264
+ }
1265
+ &:disabled {
1266
+ background-color: var(--color-surface-disabled);
1267
+ }
1268
+ &:disabled {
1269
+ color: var(--color-text-disabled);
1270
+ }
1271
+ }
1272
+ .GeckoUIOTPInput {
1273
+ display: grid;
1274
+ max-width: var(--container-xs, 20rem);
1275
+ gap: calc(var(--spacing, 0.25rem) * 2);
1276
+ }
1277
+ .GeckoUIOTPInput__input {
1278
+ box-sizing: border-box;
1279
+ border-width: 0;
1280
+ border-style: solid;
1281
+ border-color: #e5e7eb;
1282
+ font-family: inherit;
1283
+ font-feature-settings: inherit;
1284
+ font-variation-settings: inherit;
1285
+ font-size: 100%;
1286
+ font-weight: inherit;
1287
+ line-height: inherit;
1288
+ letter-spacing: inherit;
1289
+ color: inherit;
1290
+ margin: 0;
1291
+ padding: 0;
1292
+ text-transform: none;
1293
+ display: block;
1294
+ height: 100%;
1295
+ width: 100%;
1296
+ border-radius: var(--radius-lg, 0.5rem);
1297
+ border-style: var(--tw-border-style);
1298
+ border-width: 1px;
1299
+ border-color: var(--color-border-secondary);
1300
+ text-align: center;
1301
+ --tw-outline-style: none;
1302
+ outline-style: none;
1303
+ &:enabled {
1304
+ &:focus-within {
1305
+ border-color: var(--color-primary-300);
1306
+ }
1307
+ }
1308
+ &:disabled {
1309
+ cursor: not-allowed;
1310
+ }
1311
+ }
1312
+ .GeckoUIOTPInput[data-state=disabled] .GeckoUIOTPInput__input {
1313
+ background-color: var(--color-surface-disabled);
1314
+ color: var(--color-text-disabled);
1315
+ }
1316
+ .GeckoUIOTPInput:hover .GeckoUIOTPInput__input:enabled {
1317
+ border-color: var(--color-primary-400);
1318
+ }
1319
+ .GeckoUIOTPInput__overlay-button {
1320
+ box-sizing: border-box;
1321
+ border-width: 0;
1322
+ border-style: solid;
1323
+ border-color: #e5e7eb;
1324
+ font-family: inherit;
1325
+ font-feature-settings: inherit;
1326
+ font-variation-settings: inherit;
1327
+ font-size: 100%;
1328
+ font-weight: inherit;
1329
+ line-height: inherit;
1330
+ letter-spacing: inherit;
1331
+ color: inherit;
1332
+ margin: 0;
1333
+ padding: 0;
1334
+ text-transform: none;
1335
+ -webkit-appearance: button;
1336
+ cursor: pointer;
1337
+ background-image: none;
1338
+ position: absolute;
1339
+ inset: calc(var(--spacing, 0.25rem) * 0);
1340
+ z-index: 10;
1341
+ cursor: text;
1342
+ background-color: transparent;
1343
+ }
1344
+ .GeckoUIOTPInput[data-state=disabled] .GeckoUIOTPInput__overlay-button {
1345
+ cursor: not-allowed;
1346
+ }
1347
+ .GeckoUICheckbox {
1348
+ box-sizing: border-box;
1349
+ border-width: 0;
1350
+ border-style: solid;
1351
+ border-color: #e5e7eb;
1352
+ outline: none;
1353
+ }
1354
+ .GeckoUICheckbox:focus-visible {
1355
+ outline: 2px solid var(--color-primary-300);
1356
+ outline-offset: 2px;
1357
+ }
1358
+ .GeckoUICheckbox {
1359
+ display: inline-flex;
1360
+ align-items: center;
1361
+ justify-content: center;
1362
+ }
1363
+ .GeckoUICheckbox__input {
1364
+ display: none;
1365
+ }
1366
+ .GeckoUICheckbox__button {
1367
+ box-sizing: border-box;
1368
+ border-width: 0;
1369
+ border-style: solid;
1370
+ border-color: #e5e7eb;
1371
+ font-family: inherit;
1372
+ font-feature-settings: inherit;
1373
+ font-variation-settings: inherit;
1374
+ font-size: 100%;
1375
+ font-weight: inherit;
1376
+ line-height: inherit;
1377
+ letter-spacing: inherit;
1378
+ color: inherit;
1379
+ margin: 0;
1380
+ padding: 0;
1381
+ text-transform: none;
1382
+ -webkit-appearance: button;
1383
+ cursor: pointer;
1384
+ background-color: transparent;
1385
+ background-image: none;
1386
+ position: relative;
1387
+ cursor: default;
1388
+ border-radius: 0.25rem;
1389
+ }
1390
+ .GeckoUICheckbox:has(:checked:disabled) .GeckoUICheckbox__button {
1391
+ opacity: 40%;
1392
+ }
1393
+ .GeckoUICheckbox__box {
1394
+ box-sizing: border-box;
1395
+ border-width: 0;
1396
+ border-style: solid;
1397
+ border-color: #e5e7eb;
1398
+ height: calc(var(--spacing, 0.25rem) * 4);
1399
+ width: calc(var(--spacing, 0.25rem) * 4);
1400
+ cursor: pointer;
1401
+ border-radius: 0.25rem;
1402
+ border-style: var(--tw-border-style);
1403
+ border-width: 1px;
1404
+ border-color: var(--color-border-primary);
1405
+ }
1406
+ .GeckoUICheckbox__box:hover,
1407
+ .GeckoUICheckbox__box:has(:hover) {
1408
+ border-color: var(--color-primary-400);
1409
+ }
1410
+ .GeckoUICheckbox:has(:disabled) .GeckoUICheckbox__box {
1411
+ cursor: not-allowed;
1412
+ border-color: var(--color-border-disabled);
1413
+ background-color: var(--color-surface-disabled);
1414
+ }
1415
+ .GeckoUICheckbox:has(:checked) .GeckoUICheckbox__box {
1416
+ border-color: var(--color-primary-600);
1417
+ background-color: var(--color-primary-600);
1418
+ }
1419
+ .GeckoUICheckbox:has(:checked:disabled) .GeckoUICheckbox__box {
1420
+ border-color: var(--color-primary-600);
1421
+ background-color: var(--color-primary-600);
1422
+ }
1423
+ .GeckoUICheckbox__icon {
1424
+ pointer-events: none;
1425
+ position: absolute;
1426
+ inset: calc(var(--spacing, 0.25rem) * 0);
1427
+ z-index: 1;
1428
+ margin: auto;
1429
+ display: none;
1430
+ stroke-width: 5px;
1431
+ color: var(--color-text-on-primary);
1432
+ }
1433
+ .GeckoUICheckbox:has(:checked) .GeckoUICheckbox__icon {
1434
+ display: block;
1435
+ }
1436
+ .GeckoUIDateInputWrapper {
1437
+ width: 100%;
1438
+ }
1439
+ .GeckoUIDateInput__calendar {
1440
+ background-color: var(--color-surface-primary);
1441
+ }
1442
+ .GeckoUISelect {
1443
+ position: relative;
1444
+ display: flex;
1445
+ width: 100%;
1446
+ flex-direction: column;
1447
+ align-self: flex-start;
1448
+ font-size: var(--text-sm, 0.875rem);
1449
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1450
+ color: var(--color-text-primary);
1451
+ }
1452
+ .GeckoUIPagination {
1453
+ box-sizing: border-box;
1454
+ border-width: 0;
1455
+ border-style: solid;
1456
+ border-color: #e5e7eb;
1457
+ display: flex;
1458
+ width: 100%;
1459
+ align-items: center;
1460
+ justify-content: space-between;
1461
+ :where(& > :not(:last-child)) {
1462
+ --tw-space-x-reverse: 0;
1463
+ margin-inline-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-x-reverse));
1464
+ margin-inline-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-x-reverse)));
1465
+ }
1466
+ border-top-style: var(--tw-border-style);
1467
+ border-top-width: 1px;
1468
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
1469
+ @media (width >= 40rem) {
1470
+ margin-inline: calc(var(--spacing, 0.25rem) * 0);
1471
+ }
1472
+ @media (width >= 40rem) {
1473
+ justify-content: center;
1474
+ }
1475
+ }
1476
+ .GeckoUIPagination__arrow {
1477
+ box-sizing: border-box;
1478
+ border-width: 0;
1479
+ border-style: solid;
1480
+ border-color: #e5e7eb;
1481
+ font-family: inherit;
1482
+ font-feature-settings: inherit;
1483
+ font-variation-settings: inherit;
1484
+ font-size: 100%;
1485
+ font-weight: inherit;
1486
+ line-height: inherit;
1487
+ letter-spacing: inherit;
1488
+ color: inherit;
1489
+ margin: 0;
1490
+ padding: 0;
1491
+ text-transform: none;
1492
+ -webkit-appearance: button;
1493
+ cursor: pointer;
1494
+ background-color: transparent;
1495
+ background-image: none;
1496
+ position: relative;
1497
+ display: flex;
1498
+ height: calc(var(--spacing, 0.25rem) * 10);
1499
+ align-items: center;
1500
+ justify-content: center;
1501
+ padding: calc(var(--spacing, 0.25rem) * 4);
1502
+ font-size: var(--text-sm, 0.875rem);
1503
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1504
+ --tw-font-weight: var(--font-weight-medium, 500);
1505
+ font-weight: var(--font-weight-medium, 500);
1506
+ color: var(--color-text-muted);
1507
+ }
1508
+ .GeckoUIPagination__arrow:disabled {
1509
+ cursor: not-allowed;
1510
+ }
1511
+ .GeckoUIPagination__arrow__icon {
1512
+ box-sizing: border-box;
1513
+ border-width: 0;
1514
+ border-style: solid;
1515
+ border-color: #e5e7eb;
1516
+ display: inline-block;
1517
+ height: calc(var(--spacing, 0.25rem) * 4);
1518
+ width: calc(var(--spacing, 0.25rem) * 4);
1519
+ background-color: var(--color-text-primary);
1520
+ mask-position: center;
1521
+ mask-size: contain;
1522
+ mask-repeat: no-repeat;
1523
+ height: calc(var(--spacing, 0.25rem) * 5);
1524
+ width: calc(var(--spacing, 0.25rem) * 5);
1525
+ background-color: var(--color-text-muted);
1526
+ }
1527
+ .GeckoUIPagination__arrow__icon[data-direction=previous] {
1528
+ mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.2906 6.18134C13.5777 6.47992 13.5684 6.9547 13.2698 7.2418L9.33208 10.9512L13.2698 14.6605C13.5684 14.9476 13.5777 15.4224 13.2906 15.721C13.0035 16.0196 12.5287 16.0289 12.2302 15.7418L7.73017 11.4918C7.58311 11.3504 7.5 11.1552 7.5 10.9512C7.5 10.7472 7.58311 10.552 7.73017 10.4105L12.2302 6.16055C12.5287 5.87345 13.0035 5.88276 13.2906 6.18134Z" fill="%236B7280"/></svg>');
1529
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.2906 6.18134C13.5777 6.47992 13.5684 6.9547 13.2698 7.2418L9.33208 10.9512L13.2698 14.6605C13.5684 14.9476 13.5777 15.4224 13.2906 15.721C13.0035 16.0196 12.5287 16.0289 12.2302 15.7418L7.73017 11.4918C7.58311 11.3504 7.5 11.1552 7.5 10.9512C7.5 10.7472 7.58311 10.552 7.73017 10.4105L12.2302 6.16055C12.5287 5.87345 13.0035 5.88276 13.2906 6.18134Z" fill="%236B7280"/></svg>');
1530
+ }
1531
+ .GeckoUIPagination__arrow__icon[data-direction=next] {
1532
+ mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.70938 15.721C7.42228 15.4224 7.43159 14.9476 7.73017 14.6605L11.6679 10.9512L7.73017 7.2418C7.43159 6.9547 7.42228 6.47992 7.70938 6.18134C7.99647 5.88276 8.47125 5.87345 8.76983 6.16055L13.2698 10.4105C13.4169 10.5519 13.5 10.7472 13.5 10.9512C13.5 11.1552 13.4169 11.3504 13.2698 11.4918L8.76983 15.7418C8.47125 16.0289 7.99647 16.0196 7.70938 15.721Z" fill="%236B7280"/></svg>');
1533
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.70938 15.721C7.42228 15.4224 7.43159 14.9476 7.73017 14.6605L11.6679 10.9512L7.73017 7.2418C7.43159 6.9547 7.42228 6.47992 7.70938 6.18134C7.99647 5.88276 8.47125 5.87345 8.76983 6.16055L13.2698 10.4105C13.4169 10.5519 13.5 10.7472 13.5 10.9512C13.5 11.1552 13.4169 11.3504 13.2698 11.4918L8.76983 15.7418C8.47125 16.0289 7.99647 16.0196 7.70938 15.721Z" fill="%236B7280"/></svg>');
1534
+ }
1535
+ .GeckoUIPagination__arrow:disabled .GeckoUIPagination__arrow__icon {
1536
+ background-color: var(--color-border-secondary);
1537
+ }
1538
+ .GeckoUIPagination__page-count {
1539
+ display: flex;
1540
+ flex-direction: row;
1541
+ align-items: center;
1542
+ justify-content: center;
1543
+ column-gap: calc(var(--spacing, 0.25rem) * 1);
1544
+ padding: calc(var(--spacing, 0.25rem) * 4);
1545
+ font-size: var(--text-sm, 0.875rem);
1546
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1547
+ --tw-font-weight: var(--font-weight-medium, 500);
1548
+ font-weight: var(--font-weight-medium, 500);
1549
+ color: var(--color-text-muted);
1550
+ @media (width >= 40rem) {
1551
+ display: none;
1552
+ }
1553
+ }
1554
+ .GeckoUIPagination__page-buttons {
1555
+ display: none;
1556
+ flex-direction: row;
1557
+ column-gap: calc(var(--spacing, 0.25rem) * 2);
1558
+ @media (width >= 40rem) {
1559
+ display: flex;
1560
+ }
1561
+ }
1562
+ .GeckoUIPagination__page-button {
1563
+ box-sizing: border-box;
1564
+ border-width: 0;
1565
+ border-style: solid;
1566
+ border-color: #e5e7eb;
1567
+ font-family: inherit;
1568
+ font-feature-settings: inherit;
1569
+ font-variation-settings: inherit;
1570
+ font-size: 100%;
1571
+ font-weight: inherit;
1572
+ line-height: inherit;
1573
+ letter-spacing: inherit;
1574
+ color: inherit;
1575
+ margin: 0;
1576
+ padding: 0;
1577
+ text-transform: none;
1578
+ -webkit-appearance: button;
1579
+ cursor: pointer;
1580
+ background-color: transparent;
1581
+ background-image: none;
1582
+ position: relative;
1583
+ display: flex;
1584
+ height: calc(var(--spacing, 0.25rem) * 10);
1585
+ align-items: center;
1586
+ justify-content: center;
1587
+ padding: calc(var(--spacing, 0.25rem) * 4);
1588
+ font-size: var(--text-sm, 0.875rem);
1589
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1590
+ --tw-font-weight: var(--font-weight-medium, 500);
1591
+ font-weight: var(--font-weight-medium, 500);
1592
+ color: var(--color-text-muted);
1593
+ }
1594
+ .GeckoUIPagination__page-button:hover {
1595
+ color: var(--color-text-primary);
1596
+ }
1597
+ .GeckoUIPagination__page-button[data-active] {
1598
+ color: var(--color-primary-600);
1599
+ text-decoration-line: underline;
1600
+ text-underline-offset: 2px;
1601
+ }
1602
+ .GeckoUIPagination__page-button[data-active]:hover {
1603
+ color: var(--color-primary-700);
1604
+ }
1605
+ .GeckoUIPagination__page-button[data-ellipsis] {
1606
+ cursor: default;
1607
+ color: var(--color-text-disabled);
1608
+ }
1609
+ .GeckoUIInputError {
1610
+ width: 100%;
1611
+ font-size: var(--text-sm, 0.875rem);
1612
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1613
+ --tw-font-weight: var(--font-weight-normal, 400);
1614
+ font-weight: var(--font-weight-normal, 400);
1615
+ color: var(--color-red-600, oklch(57.7% 0.245 27.325));
1616
+ }
1617
+ .GeckoUICounterInput {
1618
+ box-sizing: border-box;
1619
+ border-width: 0;
1620
+ border-style: solid;
1621
+ border-color: #e5e7eb;
1622
+ display: flex;
1623
+ align-items: center;
1624
+ }
1625
+ .GeckoUICounterInput[data-state=disabled] {
1626
+ cursor: not-allowed;
1627
+ opacity: 50%;
1628
+ }
1629
+ .GeckoUICounterInput[data-state=readonly] .GeckoUICounterInput__button {
1630
+ cursor: not-allowed;
1631
+ &:disabled {
1632
+ opacity: 100%;
1633
+ }
1634
+ }
1635
+ .GeckoUICounterInput__button {
1636
+ box-sizing: border-box;
1637
+ border-width: 0;
1638
+ border-style: solid;
1639
+ border-color: #e5e7eb;
1640
+ font-family: inherit;
1641
+ font-feature-settings: inherit;
1642
+ font-variation-settings: inherit;
1643
+ font-size: 100%;
1644
+ font-weight: inherit;
1645
+ line-height: inherit;
1646
+ letter-spacing: inherit;
1647
+ color: inherit;
1648
+ margin: 0;
1649
+ padding: 0;
1650
+ text-transform: none;
1651
+ -webkit-appearance: button;
1652
+ cursor: pointer;
1653
+ background-color: transparent;
1654
+ background-image: none;
1655
+ outline: none;
1656
+ }
1657
+ .GeckoUICounterInput__button:focus-visible {
1658
+ outline: 2px solid var(--color-primary-300);
1659
+ outline-offset: 2px;
1660
+ }
1661
+ .GeckoUICounterInput__button {
1662
+ display: flex;
1663
+ align-items: center;
1664
+ justify-content: center;
1665
+ border-color: var(--color-border-secondary);
1666
+ background-color: var(--color-surface-primary);
1667
+ &:enabled {
1668
+ &:hover {
1669
+ @media (hover: hover) {
1670
+ background-color: var(--color-surface-hover);
1671
+ }
1672
+ }
1673
+ }
1674
+ &:disabled {
1675
+ cursor: not-allowed;
1676
+ }
1677
+ &:disabled {
1678
+ opacity: 50%;
1679
+ }
1680
+ }
1681
+ .GeckoUICounterInput__button[data-action=decrement] {
1682
+ border-top-left-radius: var(--radius-md, 0.375rem);
1683
+ border-bottom-left-radius: var(--radius-md, 0.375rem);
1684
+ border-style: var(--tw-border-style);
1685
+ border-width: 1px;
1686
+ }
1687
+ .GeckoUICounterInput__button[data-action=increment] {
1688
+ border-top-right-radius: var(--radius-md, 0.375rem);
1689
+ border-bottom-right-radius: var(--radius-md, 0.375rem);
1690
+ border-style: var(--tw-border-style);
1691
+ border-width: 1px;
1692
+ }
1693
+ .GeckoUICounterInput:focus-within .GeckoUICounterInput__button,
1694
+ .GeckoUICounterInput:focus-within .GeckoUICounterInput__input {
1695
+ border-color: var(--color-primary-400);
1696
+ }
1697
+ .GeckoUICounterInput__input {
1698
+ box-sizing: border-box;
1699
+ border-width: 0;
1700
+ border-style: solid;
1701
+ border-color: #e5e7eb;
1702
+ font-family: inherit;
1703
+ font-feature-settings: inherit;
1704
+ font-variation-settings: inherit;
1705
+ font-size: 100%;
1706
+ font-weight: inherit;
1707
+ line-height: inherit;
1708
+ letter-spacing: inherit;
1709
+ color: inherit;
1710
+ margin: 0;
1711
+ padding: 0;
1712
+ text-transform: none;
1713
+ border-color: var(--color-border-secondary);
1714
+ background-color: transparent;
1715
+ text-align: center;
1716
+ --tw-outline-style: none;
1717
+ outline-style: none;
1718
+ border-block-style: var(--tw-border-style);
1719
+ border-block-width: 1px;
1720
+ }
1721
+ .GeckoUICounterInput__input:disabled {
1722
+ cursor: not-allowed;
1723
+ background-color: var(--color-surface-disabled);
1724
+ }
1725
+ .GeckoUICounterInput__icon {
1726
+ box-sizing: border-box;
1727
+ border-width: 0;
1728
+ border-style: solid;
1729
+ border-color: #e5e7eb;
1730
+ display: inline-block;
1731
+ height: calc(var(--spacing, 0.25rem) * 4);
1732
+ width: calc(var(--spacing, 0.25rem) * 4);
1733
+ background-color: var(--color-text-primary);
1734
+ mask-position: center;
1735
+ mask-size: contain;
1736
+ mask-repeat: no-repeat;
1737
+ }
1738
+ .GeckoUICounterInput__icon[data-icon=minus] {
1739
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
1740
+ }
1741
+ .GeckoUICounterInput__icon[data-icon=plus] {
1742
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
1743
+ }
1744
+ .GeckoUICounterInput[data-size=sm] .GeckoUICounterInput__button {
1745
+ height: calc(var(--spacing, 0.25rem) * 8);
1746
+ width: calc(var(--spacing, 0.25rem) * 8);
1747
+ }
1748
+ .GeckoUICounterInput[data-size=sm] .GeckoUICounterInput__input {
1749
+ height: calc(var(--spacing, 0.25rem) * 8);
1750
+ width: calc(var(--spacing, 0.25rem) * 12);
1751
+ font-size: var(--text-xs, 0.75rem);
1752
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1753
+ }
1754
+ .GeckoUICounterInput[data-size=sm] .GeckoUICounterInput__icon {
1755
+ height: calc(var(--spacing, 0.25rem) * 3);
1756
+ width: calc(var(--spacing, 0.25rem) * 3);
1757
+ }
1758
+ .GeckoUICounterInput[data-size=md] .GeckoUICounterInput__button {
1759
+ height: calc(var(--spacing, 0.25rem) * 10);
1760
+ width: calc(var(--spacing, 0.25rem) * 10);
1761
+ }
1762
+ .GeckoUICounterInput[data-size=md] .GeckoUICounterInput__input {
1763
+ height: calc(var(--spacing, 0.25rem) * 10);
1764
+ width: calc(var(--spacing, 0.25rem) * 16);
1765
+ font-size: var(--text-sm, 0.875rem);
1766
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1767
+ }
1768
+ .GeckoUICounterInput[data-size=md] .GeckoUICounterInput__icon {
1769
+ height: calc(var(--spacing, 0.25rem) * 4);
1770
+ width: calc(var(--spacing, 0.25rem) * 4);
1771
+ }
1772
+ .GeckoUICounterInput[data-size=lg] .GeckoUICounterInput__button {
1773
+ height: calc(var(--spacing, 0.25rem) * 12);
1774
+ width: calc(var(--spacing, 0.25rem) * 12);
1775
+ }
1776
+ .GeckoUICounterInput[data-size=lg] .GeckoUICounterInput__input {
1777
+ height: calc(var(--spacing, 0.25rem) * 12);
1778
+ width: calc(var(--spacing, 0.25rem) * 20);
1779
+ font-size: var(--text-base, 1rem);
1780
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
1781
+ }
1782
+ .GeckoUICounterInput[data-size=lg] .GeckoUICounterInput__icon {
1783
+ height: calc(var(--spacing, 0.25rem) * 5);
1784
+ width: calc(var(--spacing, 0.25rem) * 5);
1785
+ }
1786
+ .GeckoUICalendar {
1787
+ box-sizing: border-box;
1788
+ border-width: 0;
1789
+ border-style: solid;
1790
+ border-color: #e5e7eb;
1791
+ margin-top: 1px;
1792
+ max-width: 320px;
1793
+ min-width: 320px;
1794
+ border-radius: var(--radius-md, 0.375rem);
1795
+ border-style: var(--tw-border-style);
1796
+ border-width: 1px;
1797
+ border-color: var(--color-border-primary);
1798
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1799
+ padding-block: calc(var(--spacing, 0.25rem) * 4);
1800
+ font-size: var(--text-sm, 0.875rem);
1801
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1802
+ }
1803
+ .GeckoUICalendar[data-calendars="2"] {
1804
+ max-width: fit-content;
1805
+ min-width: fit-content;
1806
+ }
1807
+ .GeckoUICalendar__dual {
1808
+ display: flex;
1809
+ gap: calc(var(--spacing, 0.25rem) * 4);
1810
+ }
1811
+ .GeckoUICalendar__dual__item {
1812
+ max-width: 296px;
1813
+ min-width: 296px;
1814
+ }
1815
+ .GeckoUICalendar__dual__item[data-position=second] {
1816
+ display: none;
1817
+ @media (width >= 48rem) {
1818
+ display: block;
1819
+ }
1820
+ }
1821
+ .GeckoUILoadingButton[data-loading] {
1822
+ gap: calc(var(--spacing, 0.25rem) * 2);
1823
+ }
1824
+ .GeckoUIConfirmDialog__dialog {
1825
+ padding-top: calc(var(--spacing, 0.25rem) * 6);
1826
+ padding-bottom: calc(var(--spacing, 0.25rem) * 4);
1827
+ }
1828
+ .GeckoUIConfirmDialog__title {
1829
+ font-size: var(--text-base, 1rem);
1830
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
1831
+ --tw-leading: 1;
1832
+ line-height: 1;
1833
+ --tw-font-weight: var(--font-weight-semibold, 600);
1834
+ font-weight: var(--font-weight-semibold, 600);
1835
+ color: var(--color-text-primary);
1836
+ }
1837
+ .GeckoUIConfirmDialog__content {
1838
+ margin-bottom: calc(var(--spacing, 0.25rem) * 1);
1839
+ padding-block: calc(var(--spacing, 0.25rem) * 4);
1840
+ font-size: var(--text-sm, 0.875rem);
1841
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1842
+ --tw-font-weight: var(--font-weight-normal, 400);
1843
+ font-weight: var(--font-weight-normal, 400);
1844
+ color: var(--color-text-muted);
1845
+ }
1846
+ .GeckoUIConfirmDialog__actions {
1847
+ display: flex;
1848
+ flex-direction: row;
1849
+ justify-content: flex-end;
1850
+ column-gap: calc(var(--spacing, 0.25rem) * 2);
1851
+ font-size: var(--text-sm, 0.875rem);
1852
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1853
+ --tw-font-weight: var(--font-weight-semibold, 600);
1854
+ font-weight: var(--font-weight-semibold, 600);
1855
+ }
1856
+ .GeckoUIDateInput {
1857
+ box-sizing: border-box;
1858
+ border-width: 0;
1859
+ border-style: solid;
1860
+ border-color: #e5e7eb;
1861
+ position: relative;
1862
+ display: flex;
1863
+ min-height: calc(var(--spacing, 0.25rem) * 10);
1864
+ align-items: center;
1865
+ gap: calc(var(--spacing, 0.25rem) * 3);
1866
+ border-radius: var(--radius-md, 0.375rem);
1867
+ border-style: var(--tw-border-style);
1868
+ border-width: 1px;
1869
+ border-color: var(--color-border-secondary);
1870
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1871
+ }
1872
+ .GeckoUIDateInput[data-state=disabled] {
1873
+ cursor: not-allowed;
1874
+ background-color: var(--color-surface-disabled);
1875
+ color: var(--color-text-disabled);
1876
+ }
1877
+ .GeckoUIDateInput[data-state=disabled] .GeckoUIDateInput__segment {
1878
+ cursor: not-allowed;
1879
+ }
1880
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__segment:focus-within {
1881
+ background-color: transparent;
1882
+ &:hover {
1883
+ @media (hover: hover) {
1884
+ background-color: transparent;
1885
+ }
1886
+ }
1887
+ }
1888
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__segment[data-empty] {
1889
+ color: var(--color-text-placeholder);
1890
+ }
1891
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__segment:hover {
1892
+ background-color: transparent;
1893
+ }
1894
+ .GeckoUIDateInput[data-state=enabled] {
1895
+ cursor: text;
1896
+ }
1897
+ .GeckoUIDateInput[data-state=enabled]:focus-within {
1898
+ border-color: var(--color-primary-500);
1899
+ }
1900
+ .GeckoUIDateInput[data-state=enabled]:hover {
1901
+ border-color: var(--color-primary-300);
1902
+ }
1903
+ .GeckoUIDateInput[data-error] {
1904
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
1905
+ &:hover {
1906
+ @media (hover: hover) {
1907
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
1908
+ }
1909
+ }
1910
+ }
1911
+ .GeckoUIDateInput[data-empty] .GeckoUIDateInput__display-container {
1912
+ width: calc(var(--spacing, 0.25rem) * 0);
1913
+ flex: 0;
1914
+ overflow: hidden;
1915
+ }
1916
+ .GeckoUIDateInput[data-state=enabled]:focus-within .GeckoUIDateInput__display-container {
1917
+ flex: 1;
1918
+ overflow: visible;
1919
+ }
1920
+ .GeckoUIDateInput__placeholder {
1921
+ overflow: hidden;
1922
+ display: -webkit-box;
1923
+ -webkit-box-orient: vertical;
1924
+ -webkit-line-clamp: 1;
1925
+ flex: 1;
1926
+ font-size: var(--text-sm, 0.875rem);
1927
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1928
+ color: var(--color-text-placeholder);
1929
+ }
1930
+ .GeckoUIDateInput[data-state=enabled]:focus-within .GeckoUIDateInput__placeholder {
1931
+ display: none;
1932
+ }
1933
+ .GeckoUIDateInput__hidden-input {
1934
+ pointer-events: none;
1935
+ position: absolute;
1936
+ top: calc(var(--spacing, 0.25rem) * 0);
1937
+ left: calc(var(--spacing, 0.25rem) * 0);
1938
+ z-index: calc(10 * -1);
1939
+ height: 100%;
1940
+ width: 100%;
1941
+ --tw-border-style: none;
1942
+ border-style: none;
1943
+ background-color: transparent;
1944
+ opacity: 0%;
1945
+ --tw-outline-style: none;
1946
+ outline-style: none;
1947
+ }
1948
+ .GeckoUIDateInput__display-container {
1949
+ margin-left: 1px;
1950
+ display: flex;
1951
+ flex: 1;
1952
+ align-items: center;
1953
+ font-size: var(--text-sm, 0.875rem);
1954
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1955
+ }
1956
+ .GeckoUIDateInput__segment {
1957
+ cursor: text;
1958
+ border-radius: 0.25rem;
1959
+ padding-block: calc(var(--spacing, 0.25rem) * 0.5);
1960
+ text-align: center;
1961
+ font-size: var(--text-sm, 0.875rem);
1962
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1963
+ transition-property:
1964
+ color,
1965
+ background-color,
1966
+ border-color,
1967
+ outline-color,
1968
+ text-decoration-color,
1969
+ fill,
1970
+ stroke,
1971
+ --tw-gradient-from,
1972
+ --tw-gradient-via,
1973
+ --tw-gradient-to;
1974
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
1975
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
1976
+ --tw-duration: 150ms;
1977
+ transition-duration: 150ms;
1978
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
1979
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
1980
+ }
1981
+ .GeckoUIDateInput__segment:focus-within {
1982
+ background-color: var(--color-surface-hover-strong);
1983
+ &:hover {
1984
+ @media (hover: hover) {
1985
+ background-color: var(--color-surface-hover-strong);
1986
+ }
1987
+ }
1988
+ }
1989
+ .GeckoUIDateInput__segment[data-empty] {
1990
+ color: var(--color-text-placeholder);
1991
+ }
1992
+ .GeckoUIDateInput__segment:hover {
1993
+ background-color: var(--color-surface-hover);
1994
+ }
1995
+ .GeckoUIDateInput__separator {
1996
+ color: var(--color-text-muted);
1997
+ -webkit-user-select: none;
1998
+ user-select: none;
1999
+ }
2000
+ .GeckoUIDateInput[data-state=disabled] .GeckoUIDateInput__separator {
2001
+ color: var(--color-text-disabled);
2002
+ }
2003
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__separator {
2004
+ color: var(--color-text-secondary);
2005
+ }
2006
+ .GeckoUIDateInput__prefix,
2007
+ .GeckoUIDateInput__suffix {
2008
+ display: flex;
2009
+ align-items: center;
2010
+ }
2011
+ .GeckoUIDateInput__icons {
2012
+ display: flex;
2013
+ align-items: center;
2014
+ }
2015
+ .GeckoUIDateInput__clear-button {
2016
+ box-sizing: border-box;
2017
+ border-width: 0;
2018
+ border-style: solid;
2019
+ border-color: #e5e7eb;
2020
+ font-family: inherit;
2021
+ font-feature-settings: inherit;
2022
+ font-variation-settings: inherit;
2023
+ font-size: 100%;
2024
+ font-weight: inherit;
2025
+ line-height: inherit;
2026
+ letter-spacing: inherit;
2027
+ color: inherit;
2028
+ margin: 0;
2029
+ padding: 0;
2030
+ text-transform: none;
2031
+ -webkit-appearance: button;
2032
+ background-color: transparent;
2033
+ background-image: none;
2034
+ display: flex;
2035
+ cursor: pointer;
2036
+ align-items: center;
2037
+ justify-content: center;
2038
+ padding: calc(var(--spacing, 0.25rem) * 1);
2039
+ }
2040
+ .GeckoUIDateInput__clear-button:hover .GeckoUI-icon__clear {
2041
+ background-color: var(--color-text-secondary);
2042
+ }
2043
+ .GeckoUIDateInput__calendar-icon {
2044
+ box-sizing: border-box;
2045
+ border-width: 0;
2046
+ border-style: solid;
2047
+ border-color: #e5e7eb;
2048
+ display: inline-block;
2049
+ height: calc(var(--spacing, 0.25rem) * 4);
2050
+ width: calc(var(--spacing, 0.25rem) * 4);
2051
+ background-color: var(--color-text-primary);
2052
+ mask-position: center;
2053
+ mask-size: contain;
2054
+ mask-repeat: no-repeat;
2055
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>');
2056
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>');
2057
+ }
2058
+ .GeckoUIDateInput[data-state=disabled] .GeckoUIDateInput__calendar-icon {
2059
+ cursor: not-allowed;
2060
+ }
2061
+ .GeckoUIDateInput__calendar {
2062
+ z-index: 10;
2063
+ background-color: var(--color-surface-primary);
2064
+ }
2065
+ .GeckoUISelectMenu {
2066
+ box-sizing: border-box;
2067
+ border-width: 0;
2068
+ border-style: solid;
2069
+ border-color: #e5e7eb;
2070
+ position: absolute;
2071
+ left: calc(var(--spacing, 0.25rem) * 0);
2072
+ z-index: 10;
2073
+ display: flex;
2074
+ max-height: 240px;
2075
+ width: 100%;
2076
+ min-width: calc(var(--spacing, 0.25rem) * 0);
2077
+ flex-direction: column;
2078
+ gap: 1px;
2079
+ border-radius: var(--radius-md, 0.375rem);
2080
+ background-color: var(--color-surface-primary);
2081
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2082
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2083
+ box-shadow:
2084
+ var(--tw-inset-shadow),
2085
+ var(--tw-inset-ring-shadow),
2086
+ var(--tw-ring-offset-shadow),
2087
+ var(--tw-ring-shadow),
2088
+ var(--tw-shadow);
2089
+ --tw-ring-color: var(--color-border-primary);
2090
+ }
2091
+ .GeckoUISelectMenu__items {
2092
+ box-sizing: border-box;
2093
+ border-width: 0;
2094
+ border-style: solid;
2095
+ border-color: #e5e7eb;
2096
+ scrollbar-width: thin;
2097
+ scrollbar-color: var(--gecko-ui-scrollbar-thumb) transparent;
2098
+ scrollbar-gutter: auto;
2099
+ }
2100
+ .GeckoUISelectMenu__items -webkit-scrollbar {
2101
+ width: 6px;
2102
+ }
2103
+ .GeckoUISelectMenu__items -webkit-scrollbar-track {
2104
+ background: transparent;
2105
+ }
2106
+ .GeckoUISelectMenu__items -webkit-scrollbar-thumb {
2107
+ background: var(--gecko-ui-scrollbar-thumb);
2108
+ }
2109
+ .GeckoUISelectMenu__items -webkit-scrollbar-thumb:hover {
2110
+ background: var(--gecko-ui-scrollbar-thumb-hover);
2111
+ }
2112
+ .GeckoUISelectMenu__items {
2113
+ scrollbar-gutter: stable overlay;
2114
+ display: flex;
2115
+ flex-direction: column;
2116
+ gap: 1px;
2117
+ overflow-y: auto;
2118
+ overscroll-behavior: contain;
2119
+ padding: calc(var(--spacing, 0.25rem) * 2);
2120
+ }
2121
+ .GeckoUISelectMenu[data-with-search] {
2122
+ max-height: 260px;
2123
+ }
2124
+ .GeckoUISelectMenu__search-container {
2125
+ border-radius: 0;
2126
+ border-inline-style: var(--tw-border-style);
2127
+ border-inline-width: 0px;
2128
+ border-top-style: var(--tw-border-style);
2129
+ border-top-width: 0px;
2130
+ }
2131
+ .GeckoUISelectMenu__search-container:hover {
2132
+ border-color: var(--color-border-primary);
2133
+ }
2134
+ .GeckoUISelectMenu__search-container:focus-within {
2135
+ border-color: var(--color-border-primary);
2136
+ }
2137
+ .GeckoUIDateRangeInputWrapper {
2138
+ width: 100%;
2139
+ }
2140
+ .GeckoUIDateRangeInput__range-separator {
2141
+ margin-inline: calc(var(--spacing, 0.25rem) * 1);
2142
+ padding-bottom: 1px;
2143
+ white-space: nowrap;
2144
+ color: var(--color-text-secondary);
2145
+ -webkit-user-select: none;
2146
+ user-select: none;
2147
+ }
2148
+ .GeckoUIDateRangeInput__calendar {
2149
+ background-color: var(--color-surface-primary);
2150
+ }
2151
+ .GeckoUISelectEmpty {
2152
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2153
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
2154
+ text-align: center;
2155
+ font-size: var(--text-sm, 0.875rem);
2156
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2157
+ color: var(--color-text-disabled);
2158
+ }
2159
+ .GeckoUISelectOption {
2160
+ display: flex;
2161
+ cursor: pointer;
2162
+ scroll-margin: calc(var(--spacing, 0.25rem) * 2);
2163
+ flex-direction: row;
2164
+ align-items: center;
2165
+ justify-content: space-between;
2166
+ gap: calc(var(--spacing, 0.25rem) * 3);
2167
+ border-radius: 0.25rem;
2168
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
2169
+ padding-right: 16px;
2170
+ padding-left: 12px;
2171
+ text-align: left;
2172
+ }
2173
+ .GeckoUISelectOption[data-focused] {
2174
+ background-color: var(--color-surface-hover-strong);
2175
+ }
2176
+ .GeckoUISelectOption[data-disabled] {
2177
+ cursor: not-allowed;
2178
+ opacity: 50%;
2179
+ }
2180
+ .GeckoUISelectOption__check-icon {
2181
+ height: calc(var(--spacing, 0.25rem) * 3.5);
2182
+ width: calc(var(--spacing, 0.25rem) * 3.5);
2183
+ }
2184
+ .GeckoUISelectButton {
2185
+ box-sizing: border-box;
2186
+ border-width: 0;
2187
+ border-style: solid;
2188
+ border-color: #e5e7eb;
2189
+ font-family: inherit;
2190
+ font-feature-settings: inherit;
2191
+ font-variation-settings: inherit;
2192
+ font-size: 100%;
2193
+ font-weight: inherit;
2194
+ line-height: inherit;
2195
+ letter-spacing: inherit;
2196
+ color: inherit;
2197
+ margin: 0;
2198
+ padding: 0;
2199
+ text-transform: none;
2200
+ -webkit-appearance: button;
2201
+ cursor: pointer;
2202
+ background-color: transparent;
2203
+ background-image: none;
2204
+ position: relative;
2205
+ display: flex;
2206
+ min-height: calc(var(--spacing, 0.25rem) * 10);
2207
+ width: 100%;
2208
+ align-items: center;
2209
+ gap: calc(var(--spacing, 0.25rem) * 2);
2210
+ border-radius: var(--radius-md, 0.375rem);
2211
+ border-style: var(--tw-border-style);
2212
+ border-width: 1px;
2213
+ border-color: var(--color-border-secondary);
2214
+ padding-block: calc(var(--spacing, 0.25rem) * 1);
2215
+ padding-right: calc(var(--spacing, 0.25rem) * 3);
2216
+ padding-left: calc(var(--spacing, 0.25rem) * 3);
2217
+ color: var(--color-text-primary);
2218
+ }
2219
+ .GeckoUISelectButton[data-state=enabled] {
2220
+ cursor: pointer;
2221
+ }
2222
+ .GeckoUISelectButton[data-state=enabled]:focus-within {
2223
+ border-color: var(--color-primary-400);
2224
+ }
2225
+ .GeckoUISelectButton[data-state=enabled]:hover {
2226
+ border-color: var(--color-primary-400);
2227
+ }
2228
+ .GeckoUISelectButton[data-state=disabled] {
2229
+ cursor: not-allowed;
2230
+ background-color: var(--color-surface-disabled);
2231
+ }
2232
+ .GeckoUISelectButton[data-readonly] {
2233
+ gap: calc(var(--spacing, 0.25rem) * 1);
2234
+ }
2235
+ .GeckoUISelectButton__content {
2236
+ position: static;
2237
+ display: flex;
2238
+ width: 100%;
2239
+ flex: 1;
2240
+ flex-wrap: wrap;
2241
+ align-items: center;
2242
+ gap: calc(var(--spacing, 0.25rem) * 1);
2243
+ overflow-x: scroll;
2244
+ scrollbar-width: none;
2245
+ scrollbar-color: transparent transparent;
2246
+ scrollbar-gutter: stable;
2247
+ }
2248
+ .GeckoUISelectButton__content -webkit-scrollbar {
2249
+ width: 0px;
2250
+ }
2251
+ .GeckoUISelectButton__content -webkit-scrollbar-track {
2252
+ background: transparent;
2253
+ }
2254
+ .GeckoUISelectButton__multiselected-chip {
2255
+ display: inline-flex;
2256
+ align-items: center;
2257
+ gap: calc(var(--spacing, 0.25rem) * 1);
2258
+ align-self: center;
2259
+ border-radius: 0.25rem;
2260
+ border-style: var(--tw-border-style);
2261
+ border-width: 1px;
2262
+ border-color: color-mix(in srgb, oklch(0.8699 0 none) 70%, transparent);
2263
+ @supports (color: color-mix(in lab, red, red)) {
2264
+ border-color: color-mix(in oklab, var(--color-border-secondary) 70%, transparent);
2265
+ }
2266
+ background-color: var(--color-surface-tertiary);
2267
+ padding-inline: calc(var(--spacing, 0.25rem) * 2);
2268
+ padding-block: calc(var(--spacing, 0.25rem) * 1);
2269
+ text-align: left;
2270
+ font-size: var(--text-xs, 0.75rem);
2271
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
2272
+ color: var(--color-text-primary);
2273
+ }
2274
+ .GeckoUISelectButton__multiselected-chip[data-disabled] {
2275
+ color: var(--color-text-disabled);
2276
+ opacity: 70%;
2277
+ }
2278
+ .GeckoUISelectButton__multiselected-chip__clear-button {
2279
+ box-sizing: border-box;
2280
+ border-width: 0;
2281
+ border-style: solid;
2282
+ border-color: #e5e7eb;
2283
+ font-family: inherit;
2284
+ font-feature-settings: inherit;
2285
+ font-variation-settings: inherit;
2286
+ font-size: 100%;
2287
+ font-weight: inherit;
2288
+ line-height: inherit;
2289
+ letter-spacing: inherit;
2290
+ color: inherit;
2291
+ margin: 0;
2292
+ padding: 0;
2293
+ text-transform: none;
2294
+ -webkit-appearance: button;
2295
+ cursor: pointer;
2296
+ background-color: transparent;
2297
+ background-image: none;
2298
+ display: flex;
2299
+ height: calc(var(--spacing, 0.25rem) * 4);
2300
+ width: calc(var(--spacing, 0.25rem) * 4);
2301
+ align-items: center;
2302
+ justify-content: center;
2303
+ border-radius: var(--radius-sm, 0.25rem);
2304
+ }
2305
+ .GeckoUISelectButton__multiselected-chip__clear-button__icon {
2306
+ display: inline-block;
2307
+ height: calc(var(--spacing, 0.25rem) * 2);
2308
+ width: calc(var(--spacing, 0.25rem) * 2);
2309
+ background-color: var(--color-text-secondary);
2310
+ mask-image: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.02426 0.175736C0.78995 -0.0585786 0.41005 -0.0585786 0.175736 0.175736C-0.0585786 0.41005 -0.0585786 0.78995 0.175736 1.02426L3.15147 4L0.175736 6.97574C-0.0585786 7.21005 -0.0585786 7.58995 0.175736 7.82426C0.41005 8.05858 0.78995 8.05858 1.02426 7.82426L4 4.84853L6.97574 7.82426C7.21005 8.05858 7.58995 8.05858 7.82426 7.82426C8.05858 7.58995 8.05858 7.21005 7.82426 6.97574L4.84853 4L7.82426 1.02426C8.05858 0.78995 8.05858 0.41005 7.82426 0.175736C7.58995 -0.0585786 7.21005 -0.0585786 6.97574 0.175736L4 3.15147L1.02426 0.175736Z" fill="currentColor"/></svg>');
2311
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.02426 0.175736C0.78995 -0.0585786 0.41005 -0.0585786 0.175736 0.175736C-0.0585786 0.41005 -0.0585786 0.78995 0.175736 1.02426L3.15147 4L0.175736 6.97574C-0.0585786 7.21005 -0.0585786 7.58995 0.175736 7.82426C0.41005 8.05858 0.78995 8.05858 1.02426 7.82426L4 4.84853L6.97574 7.82426C7.21005 8.05858 7.58995 8.05858 7.82426 7.82426C8.05858 7.58995 8.05858 7.21005 7.82426 6.97574L4.84853 4L7.82426 1.02426C8.05858 0.78995 8.05858 0.41005 7.82426 0.175736C7.58995 -0.0585786 7.21005 -0.0585786 6.97574 0.175736L4 3.15147L1.02426 0.175736Z" fill="currentColor"/></svg>');
2312
+ }
2313
+ .GeckoUISelectButton__multiselected-chip__clear-button[data-disabled] {
2314
+ cursor: not-allowed;
2315
+ }
2316
+ .GeckoUISelectButton__multiselected-chip__clear-button:hover {
2317
+ background-color: var(--color-surface-active);
2318
+ }
2319
+ .GeckoUISelectButton__multiselected-chip__clear-button[data-disabled]:hover {
2320
+ background-color: transparent;
2321
+ }
2322
+ .GeckoUISelectButton__value {
2323
+ display: flex;
2324
+ align-items: center;
2325
+ color: var(--color-text-primary);
2326
+ }
2327
+ .GeckoUISelectButton__value[data-placeholder] {
2328
+ position: relative;
2329
+ margin-left: calc(var(--spacing, 0.25rem) * 0);
2330
+ color: var(--color-text-placeholder);
2331
+ }
2332
+ .GeckoUISelectButton__value[data-hidden] {
2333
+ display: none;
2334
+ }
2335
+ .GeckoUISelectButton__icons {
2336
+ display: flex;
2337
+ align-items: center;
2338
+ gap: calc(var(--spacing, 0.25rem) * 1);
2339
+ }
2340
+ .GeckoUISelectButton[data-state=disabled] .GeckoUISelectButton__value {
2341
+ color: var(--color-text-disabled);
2342
+ }
2343
+ .GeckoUISelectButton__clear-button {
2344
+ display: flex;
2345
+ cursor: pointer;
2346
+ align-self: center;
2347
+ }
2348
+ .GeckoUISelectButton__search {
2349
+ visibility: visible;
2350
+ color: inherit;
2351
+ flex: 1 1 auto;
2352
+ display: inline-grid;
2353
+ grid-area: 1/1/2/3;
2354
+ grid-template-columns: 0px min-content;
2355
+ box-sizing: border-box;
2356
+ }
2357
+ .GeckoUISelectButton__search[data-multi-selected] {
2358
+ padding: 0 2px;
2359
+ }
2360
+ .GeckoUISelectButton__search[data-focusonly] {
2361
+ position: absolute;
2362
+ inset: calc(var(--spacing, 0.25rem) * 0);
2363
+ z-index: calc(10 * -1);
2364
+ }
2365
+ .GeckoUISelectButton__search:after {
2366
+ content: attr(data-keyword) " ";
2367
+ visibility: hidden;
2368
+ white-space: pre;
2369
+ grid-area: 1/2;
2370
+ font: inherit;
2371
+ min-width: 2px;
2372
+ border: 0px;
2373
+ margin: 0px;
2374
+ outline: 0px;
2375
+ padding: 0px;
2376
+ }
2377
+ .GeckoUISelectButton__search__input {
2378
+ box-sizing: border-box;
2379
+ border-width: 0;
2380
+ border-style: solid;
2381
+ border-color: #e5e7eb;
2382
+ font-family: inherit;
2383
+ font-feature-settings: inherit;
2384
+ font-variation-settings: inherit;
2385
+ font-size: 100%;
2386
+ font-weight: inherit;
2387
+ line-height: inherit;
2388
+ letter-spacing: inherit;
2389
+ margin: 0;
2390
+ padding: 0;
2391
+ text-transform: none;
2392
+ -webkit-appearance: button;
2393
+ background-color: transparent;
2394
+ background-image: none;
2395
+ color: inherit;
2396
+ background: 0px center;
2397
+ opacity: 1;
2398
+ width: 100%;
2399
+ grid-area: 1/2;
2400
+ font: inherit;
2401
+ min-width: 2px;
2402
+ border: 0px;
2403
+ margin: 0px;
2404
+ outline: 0px;
2405
+ padding: 0px;
2406
+ }
2407
+ .GeckoUISelectButton__search__input[data-initial] {
2408
+ position: absolute;
2409
+ left: calc(var(--spacing, 0.25rem) * 3);
2410
+ }
2411
+ .GeckoUISelectButton__search__input[data-readonly] {
2412
+ width: 0;
2413
+ z-index: -1;
2414
+ cursor: pointer;
2415
+ color: transparent;
2416
+ position: absolute;
2417
+ left: 0;
2418
+ }
2419
+ .GeckoUICalendar__header {
2420
+ display: flex;
2421
+ align-items: center;
2422
+ justify-content: space-between;
2423
+ gap: calc(var(--spacing, 0.25rem) * 1);
2424
+ padding-bottom: calc(var(--spacing, 0.25rem) * 4);
2425
+ }
2426
+ .GeckoUICalendar__header__title {
2427
+ box-sizing: border-box;
2428
+ border-width: 0;
2429
+ border-style: solid;
2430
+ border-color: #e5e7eb;
2431
+ font-family: inherit;
2432
+ font-feature-settings: inherit;
2433
+ font-variation-settings: inherit;
2434
+ font-size: 100%;
2435
+ font-weight: inherit;
2436
+ line-height: inherit;
2437
+ letter-spacing: inherit;
2438
+ color: inherit;
2439
+ margin: 0;
2440
+ padding: 0;
2441
+ text-transform: none;
2442
+ -webkit-appearance: button;
2443
+ cursor: pointer;
2444
+ background-color: transparent;
2445
+ background-image: none;
2446
+ display: flex;
2447
+ flex: 1;
2448
+ cursor: default;
2449
+ align-items: center;
2450
+ justify-content: center;
2451
+ border-radius: var(--radius-md, 0.375rem);
2452
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2453
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
2454
+ --tw-font-weight: var(--font-weight-bold, 700);
2455
+ font-weight: var(--font-weight-bold, 700);
2456
+ }
2457
+ .GeckoUICalendar__header__title[data-clickable] {
2458
+ cursor: pointer;
2459
+ &:hover {
2460
+ @media (hover: hover) {
2461
+ background-color: var(--color-surface-hover-strong);
2462
+ }
2463
+ }
2464
+ }
2465
+ .GeckoUICalendar__header__arrow-button {
2466
+ box-sizing: border-box;
2467
+ border-width: 0;
2468
+ border-style: solid;
2469
+ border-color: #e5e7eb;
2470
+ font-family: inherit;
2471
+ font-feature-settings: inherit;
2472
+ font-variation-settings: inherit;
2473
+ font-size: 100%;
2474
+ font-weight: inherit;
2475
+ line-height: inherit;
2476
+ letter-spacing: inherit;
2477
+ color: inherit;
2478
+ margin: 0;
2479
+ padding: 0;
2480
+ text-transform: none;
2481
+ -webkit-appearance: button;
2482
+ cursor: pointer;
2483
+ background-color: transparent;
2484
+ background-image: none;
2485
+ border-radius: var(--radius-md, 0.375rem);
2486
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2487
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
2488
+ &:hover {
2489
+ @media (hover: hover) {
2490
+ background-color: var(--color-surface-hover-strong);
2491
+ }
2492
+ }
2493
+ }
2494
+ .GeckoUICalendar__header__arrow-left-icon,
2495
+ .GeckoUICalendar__header__arrow-right-icon {
2496
+ box-sizing: border-box;
2497
+ border-width: 0;
2498
+ border-style: solid;
2499
+ border-color: #e5e7eb;
2500
+ display: inline-block;
2501
+ height: calc(var(--spacing, 0.25rem) * 4);
2502
+ width: calc(var(--spacing, 0.25rem) * 4);
2503
+ background-color: var(--color-text-primary);
2504
+ mask-position: center;
2505
+ mask-size: contain;
2506
+ mask-repeat: no-repeat;
2507
+ }
2508
+ .GeckoUICalendar__header__arrow-left-icon {
2509
+ mask-image: url('data:image/svg+xml,<svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" fill-rule="evenodd"></path></svg>');
2510
+ -webkit-mask-image: url('data:image/svg+xml,<svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" fill-rule="evenodd"></path></svg>');
2511
+ }
2512
+ .GeckoUICalendar__header__arrow-right-icon {
2513
+ mask-image: url('data:image/svg+xml,<svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" fill-rule="evenodd"></path></svg>');
2514
+ -webkit-mask-image: url('data:image/svg+xml,<svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" fill-rule="evenodd"></path></svg>');
2515
+ }
2516
+ .GeckoUICalendar__day-picker-weekdays {
2517
+ margin-bottom: calc(var(--spacing, 0.25rem) * 2);
2518
+ display: grid;
2519
+ grid-template-columns: repeat(7, minmax(0, 1fr));
2520
+ place-items: center;
2521
+ --tw-font-weight: var(--font-weight-medium, 500);
2522
+ font-weight: var(--font-weight-medium, 500);
2523
+ opacity: 40%;
2524
+ }
2525
+ .GeckoUICalendar__day-picker {
2526
+ display: grid;
2527
+ grid-template-columns: repeat(7, minmax(0, 1fr));
2528
+ row-gap: 1px;
2529
+ }
2530
+ .GeckoUICalendar__day-picker__button {
2531
+ box-sizing: border-box;
2532
+ border-width: 0;
2533
+ border-style: solid;
2534
+ border-color: #e5e7eb;
2535
+ font-family: inherit;
2536
+ font-feature-settings: inherit;
2537
+ font-variation-settings: inherit;
2538
+ font-size: 100%;
2539
+ font-weight: inherit;
2540
+ line-height: inherit;
2541
+ letter-spacing: inherit;
2542
+ color: inherit;
2543
+ margin: 0;
2544
+ padding: 0;
2545
+ text-transform: none;
2546
+ -webkit-appearance: button;
2547
+ background-color: transparent;
2548
+ background-image: none;
2549
+ position: relative;
2550
+ display: flex;
2551
+ aspect-ratio: 1 / 1;
2552
+ width: 100%;
2553
+ height: 100%;
2554
+ cursor: pointer;
2555
+ align-items: center;
2556
+ justify-content: center;
2557
+ place-self: center;
2558
+ border-radius: var(--radius-md, 0.375rem);
2559
+ &:hover {
2560
+ @media (hover: hover) {
2561
+ background-color: var(--color-surface-hover-strong);
2562
+ }
2563
+ }
2564
+ &:disabled {
2565
+ cursor: not-allowed;
2566
+ }
2567
+ }
2568
+ .GeckoUICalendar__day-picker__button[data-today] {
2569
+ color: var(--color-primary-600);
2570
+ }
2571
+ .GeckoUICalendar__day-picker__button[data-selected] {
2572
+ background-color: var(--color-primary-700);
2573
+ color: var(--color-text-on-primary);
2574
+ &:hover {
2575
+ @media (hover: hover) {
2576
+ background-color: var(--color-primary-600);
2577
+ }
2578
+ }
2579
+ }
2580
+ .GeckoUICalendar__day-picker__button:not([data-active-month]) {
2581
+ opacity: 40%;
2582
+ }
2583
+ .GeckoUICalendar__day-picker__button[data-hover-preview] {
2584
+ border-radius: 0;
2585
+ background-color: var(--color-primary-100);
2586
+ }
2587
+ .GeckoUICalendar__day-picker__button[data-in-range] {
2588
+ position: relative;
2589
+ border-radius: 0;
2590
+ background-color: var(--color-primary-700);
2591
+ &:hover {
2592
+ @media (hover: hover) {
2593
+ background-color: var(--color-primary-600);
2594
+ }
2595
+ }
2596
+ }
2597
+ .GeckoUICalendar__day-picker__button[data-range-start],
2598
+ .GeckoUICalendar__day-picker__button[data-range-end] {
2599
+ background-color: var(--color-primary-700);
2600
+ &:hover {
2601
+ @media (hover: hover) {
2602
+ background-color: var(--color-primary-600);
2603
+ }
2604
+ }
2605
+ }
2606
+ .GeckoUICalendar__day-picker__button[data-range-start] {
2607
+ border-top-left-radius: var(--radius-md, 0.375rem);
2608
+ border-bottom-left-radius: var(--radius-md, 0.375rem);
2609
+ }
2610
+ .GeckoUICalendar__day-picker__button[data-range-end] {
2611
+ border-top-right-radius: var(--radius-md, 0.375rem);
2612
+ border-bottom-right-radius: var(--radius-md, 0.375rem);
2613
+ }
2614
+ .GeckoUICalendar__day-picker__button[data-hover-preview-start] {
2615
+ border-top-left-radius: var(--radius-md, 0.375rem);
2616
+ border-bottom-left-radius: var(--radius-md, 0.375rem);
2617
+ border-top-right-radius: 0;
2618
+ border-bottom-right-radius: 0;
2619
+ }
2620
+ .GeckoUICalendar__day-picker__button[data-hover-preview-end] {
2621
+ border-top-left-radius: 0;
2622
+ border-bottom-left-radius: 0;
2623
+ border-top-right-radius: var(--radius-md, 0.375rem);
2624
+ border-bottom-right-radius: var(--radius-md, 0.375rem);
2625
+ }
2626
+ .GeckoUICalendar__day-picker__button[data-range-start],
2627
+ .GeckoUICalendar__day-picker__button[data-range-end],
2628
+ .GeckoUICalendar__day-picker__button[data-in-range] {
2629
+ color: var(--color-text-on-primary);
2630
+ }
2631
+ .GeckoUICalendar__day-picker__button[data-disabled] {
2632
+ cursor: not-allowed;
2633
+ opacity: 30%;
2634
+ }
2635
+ .dark .GeckoUICalendar__day-picker__button[data-hover-preview] {
2636
+ background-color: var(--color-primary-500);
2637
+ }
2638
+ .GeckoUICalendar__year-picker {
2639
+ display: grid;
2640
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2641
+ place-items: center;
2642
+ gap: calc(var(--spacing, 0.25rem) * 1);
2643
+ }
2644
+ .GeckoUICalendar__year-picker__button {
2645
+ box-sizing: border-box;
2646
+ border-width: 0;
2647
+ border-style: solid;
2648
+ border-color: #e5e7eb;
2649
+ font-family: inherit;
2650
+ font-feature-settings: inherit;
2651
+ font-variation-settings: inherit;
2652
+ font-size: 100%;
2653
+ font-weight: inherit;
2654
+ line-height: inherit;
2655
+ letter-spacing: inherit;
2656
+ color: inherit;
2657
+ margin: 0;
2658
+ padding: 0;
2659
+ text-transform: none;
2660
+ -webkit-appearance: button;
2661
+ cursor: pointer;
2662
+ background-color: transparent;
2663
+ background-image: none;
2664
+ border-radius: var(--radius-md, 0.375rem);
2665
+ padding: calc(var(--spacing, 0.25rem) * 5);
2666
+ &:hover {
2667
+ @media (hover: hover) {
2668
+ background-color: var(--color-surface-hover-strong);
2669
+ }
2670
+ }
2671
+ }
2672
+ .GeckoUICalendar__year-picker__button[data-selected] {
2673
+ background-color: var(--color-surface-hover-strong);
2674
+ }
2675
+ .GeckoUICalendar__year-picker__button[data-prev-next] {
2676
+ opacity: 40%;
2677
+ &:hover {
2678
+ @media (hover: hover) {
2679
+ opacity: 100%;
2680
+ }
2681
+ }
2682
+ }
2683
+ .GeckoUISelectDropdownSearch__icon {
2684
+ display: inline-block;
2685
+ height: calc(var(--spacing, 0.25rem) * 4);
2686
+ width: calc(var(--spacing, 0.25rem) * 4);
2687
+ background-color: var(--color-text-muted);
2688
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M14.3429 13.9995L10.3429 9.99951M11.6762 6.66618C11.6762 9.24351 9.58685 11.3328 7.00952 11.3328C4.4322 11.3328 2.34286 9.24351 2.34286 6.66618C2.34286 4.08885 4.4322 1.99951 7.00952 1.99951C9.58685 1.99951 11.6762 4.08885 11.6762 6.66618Z" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
2689
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M14.3429 13.9995L10.3429 9.99951M11.6762 6.66618C11.6762 9.24351 9.58685 11.3328 7.00952 11.3328C4.4322 11.3328 2.34286 9.24351 2.34286 6.66618C2.34286 4.08885 4.4322 1.99951 7.00952 1.99951C9.58685 1.99951 11.6762 4.08885 11.6762 6.66618Z" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
2690
+ }
2691
+ .GeckoUICalendar__month-picker {
2692
+ display: grid;
2693
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2694
+ place-items: center;
2695
+ gap: calc(var(--spacing, 0.25rem) * 1);
2696
+ }
2697
+ .GeckoUICalendar__month-picker__button {
2698
+ box-sizing: border-box;
2699
+ border-width: 0;
2700
+ border-style: solid;
2701
+ border-color: #e5e7eb;
2702
+ font-family: inherit;
2703
+ font-feature-settings: inherit;
2704
+ font-variation-settings: inherit;
2705
+ font-size: 100%;
2706
+ font-weight: inherit;
2707
+ line-height: inherit;
2708
+ letter-spacing: inherit;
2709
+ color: inherit;
2710
+ margin: 0;
2711
+ padding: 0;
2712
+ text-transform: none;
2713
+ -webkit-appearance: button;
2714
+ cursor: pointer;
2715
+ background-color: transparent;
2716
+ background-image: none;
2717
+ width: 100%;
2718
+ border-radius: var(--radius-md, 0.375rem);
2719
+ padding: calc(var(--spacing, 0.25rem) * 5);
2720
+ &:hover {
2721
+ @media (hover: hover) {
2722
+ background-color: var(--color-surface-hover-strong);
2723
+ }
2724
+ }
2725
+ }
2726
+ .GeckoUICalendar__month-picker__button[data-selected] {
2727
+ background-color: var(--color-surface-hover-strong);
2728
+ }
2729
+ .GeckoUIRHFRadio {
2730
+ display: inline-flex;
2731
+ align-items: center;
2732
+ }
2733
+ .GeckoUIRHFRadio__label {
2734
+ margin-left: calc(var(--spacing, 0.25rem) * 2);
2735
+ cursor: pointer;
2736
+ font-size: var(--text-sm, 0.875rem);
2737
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2738
+ --tw-font-weight: var(--font-weight-medium, 500);
2739
+ font-weight: var(--font-weight-medium, 500);
2740
+ color: var(--color-text-secondary);
2741
+ }
2742
+ .GeckoUIRHFRadio:has(:disabled) .GeckoUIRHFRadio__label {
2743
+ cursor: not-allowed;
2744
+ color: var(--color-text-disabled);
2745
+ }
2746
+ .GeckoUIRHFInput[data-error] {
2747
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2748
+ }
2749
+ .GeckoUIRHFInput[data-error]:hover {
2750
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2751
+ }
2752
+ .GeckoUIRHFInput[data-error]:focus-within {
2753
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2754
+ }
2755
+ .GeckoUIRHFSelectButton[data-error] {
2756
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2757
+ }
2758
+ .GeckoUIRHFSelectButton[data-error]:hover {
2759
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2760
+ }
2761
+ .GeckoUIRHFSelectButton[data-error]:focus-within {
2762
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2763
+ }
2764
+ .GeckoUIRHFTextarea[data-error] {
2765
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2766
+ }
2767
+ .GeckoUIRHFTextarea[data-error]:enabled:hover {
2768
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2769
+ }
2770
+ .GeckoUIRHFTextarea[data-error]:enabled:focus {
2771
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2772
+ }
2773
+ .GeckoUIRHFOTPInput[data-error] .GeckoUIOTPInput__input {
2774
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2775
+ }
2776
+ .GeckoUIRHFOTPInput[data-error]:hover .GeckoUIOTPInput__input:enabled {
2777
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2778
+ }
2779
+ .GeckoUIRHFCheckbox {
2780
+ display: inline-flex;
2781
+ align-items: center;
2782
+ }
2783
+ .GeckoUIRHFCheckbox__label {
2784
+ margin-left: calc(var(--spacing, 0.25rem) * 2);
2785
+ cursor: pointer;
2786
+ font-size: var(--text-sm, 0.875rem);
2787
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2788
+ --tw-font-weight: var(--font-weight-medium, 500);
2789
+ font-weight: var(--font-weight-medium, 500);
2790
+ color: var(--color-text-secondary);
2791
+ }
2792
+ .GeckoUIRHFCheckbox:has(:disabled) .GeckoUIRHFCheckbox__label {
2793
+ cursor: not-allowed;
2794
+ color: var(--color-text-disabled);
2795
+ }
2796
+ .GeckoUIRHFFileInput {
2797
+ box-sizing: border-box;
2798
+ border-width: 0;
2799
+ border-style: solid;
2800
+ border-color: #e5e7eb;
2801
+ font-family: inherit;
2802
+ font-feature-settings: inherit;
2803
+ font-variation-settings: inherit;
2804
+ font-size: 100%;
2805
+ font-weight: inherit;
2806
+ line-height: inherit;
2807
+ letter-spacing: inherit;
2808
+ color: inherit;
2809
+ margin: 0;
2810
+ padding: 0;
2811
+ text-transform: none;
2812
+ }
2813
+ .GeckoUIRHFFileInput__input[data-custom] {
2814
+ display: none;
2815
+ }
2816
+ .GeckoUIRHFInputGroup {
2817
+ position: relative;
2818
+ display: flex;
2819
+ flex-direction: column;
2820
+ align-items: flex-start;
2821
+ row-gap: calc(var(--spacing, 0.25rem) * 2);
2822
+ }
2823
+ .GeckoUIRHFFilePicker {
2824
+ display: flex;
2825
+ width: 100%;
2826
+ flex-direction: column;
2827
+ gap: calc(var(--spacing, 0.25rem) * 3);
2828
+ }
2829
+ .GeckoUIRHFFilePicker[data-dragging] .GeckoUIRHFFilePicker__upload-area {
2830
+ border-color: var(--color-primary-400);
2831
+ background-color: var(--color-surface-hover-strong);
2832
+ }
2833
+ .GeckoUIRHFFilePicker[data-error] .GeckoUIRHFFilePicker__upload-area {
2834
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2835
+ }
2836
+ .GeckoUIRHFFilePicker[data-loading] {
2837
+ cursor: wait;
2838
+ }
2839
+ .GeckoUIRHFFilePicker__upload-area {
2840
+ position: relative;
2841
+ display: flex;
2842
+ min-height: 160px;
2843
+ flex-direction: column;
2844
+ align-items: center;
2845
+ justify-content: center;
2846
+ gap: calc(var(--spacing, 0.25rem) * 3);
2847
+ border-radius: var(--radius-lg, 0.5rem);
2848
+ border-style: var(--tw-border-style);
2849
+ border-width: 2px;
2850
+ --tw-border-style: dashed;
2851
+ border-style: dashed;
2852
+ border-color: var(--color-border-secondary);
2853
+ background-color: var(--color-surface-secondary);
2854
+ padding: calc(var(--spacing, 0.25rem) * 6);
2855
+ transition-property:
2856
+ color,
2857
+ background-color,
2858
+ border-color,
2859
+ outline-color,
2860
+ text-decoration-color,
2861
+ fill,
2862
+ stroke,
2863
+ --tw-gradient-from,
2864
+ --tw-gradient-via,
2865
+ --tw-gradient-to;
2866
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
2867
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
2868
+ --tw-duration: 200ms;
2869
+ transition-duration: 200ms;
2870
+ }
2871
+ .GeckoUIRHFFilePicker__upload-icon {
2872
+ height: calc(var(--spacing, 0.25rem) * 10);
2873
+ width: calc(var(--spacing, 0.25rem) * 10);
2874
+ color: var(--color-text-muted);
2875
+ }
2876
+ .GeckoUIRHFFilePicker__upload-text {
2877
+ text-align: center;
2878
+ font-size: var(--text-sm, 0.875rem);
2879
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2880
+ color: var(--color-text-muted);
2881
+ }
2882
+ .GeckoUIRHFFilePicker__upload-buttons {
2883
+ display: flex;
2884
+ flex-wrap: wrap;
2885
+ align-items: center;
2886
+ justify-content: center;
2887
+ gap: calc(var(--spacing, 0.25rem) * 2);
2888
+ }
2889
+ .GeckoUIRHFFilePicker__browse-button {
2890
+ box-sizing: border-box;
2891
+ border-width: 0;
2892
+ border-style: solid;
2893
+ border-color: #e5e7eb;
2894
+ font-family: inherit;
2895
+ font-feature-settings: inherit;
2896
+ font-variation-settings: inherit;
2897
+ font-size: 100%;
2898
+ font-weight: inherit;
2899
+ line-height: inherit;
2900
+ letter-spacing: inherit;
2901
+ color: inherit;
2902
+ margin: 0;
2903
+ padding: 0;
2904
+ text-transform: none;
2905
+ -webkit-appearance: button;
2906
+ cursor: pointer;
2907
+ background-color: transparent;
2908
+ background-image: none;
2909
+ border-radius: var(--radius-md, 0.375rem);
2910
+ border-style: var(--tw-border-style);
2911
+ border-width: 1px;
2912
+ border-color: var(--color-border-secondary);
2913
+ background-color: var(--color-surface-primary);
2914
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
2915
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
2916
+ font-size: var(--text-sm, 0.875rem);
2917
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2918
+ --tw-font-weight: var(--font-weight-medium, 500);
2919
+ font-weight: var(--font-weight-medium, 500);
2920
+ color: var(--color-text-primary);
2921
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2922
+ box-shadow:
2923
+ var(--tw-inset-shadow),
2924
+ var(--tw-inset-ring-shadow),
2925
+ var(--tw-ring-offset-shadow),
2926
+ var(--tw-ring-shadow),
2927
+ var(--tw-shadow);
2928
+ transition-property:
2929
+ color,
2930
+ background-color,
2931
+ border-color,
2932
+ outline-color,
2933
+ text-decoration-color,
2934
+ fill,
2935
+ stroke,
2936
+ --tw-gradient-from,
2937
+ --tw-gradient-via,
2938
+ --tw-gradient-to;
2939
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
2940
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
2941
+ --tw-duration: 200ms;
2942
+ transition-duration: 200ms;
2943
+ }
2944
+ .GeckoUIRHFFilePicker__browse-button:hover {
2945
+ background-color: var(--color-surface-tertiary);
2946
+ }
2947
+ .GeckoUIRHFFilePicker__browse-button:focus-visible {
2948
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2949
+ box-shadow:
2950
+ var(--tw-inset-shadow),
2951
+ var(--tw-inset-ring-shadow),
2952
+ var(--tw-ring-offset-shadow),
2953
+ var(--tw-ring-shadow),
2954
+ var(--tw-shadow);
2955
+ --tw-ring-color: var(--color-primary-400);
2956
+ --tw-ring-offset-width: 2px;
2957
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2958
+ --tw-outline-style: none;
2959
+ outline-style: none;
2960
+ }
2961
+ .GeckoUIRHFFilePicker__file-list {
2962
+ display: flex;
2963
+ max-height: 200px;
2964
+ flex-direction: column;
2965
+ overflow-y: auto;
2966
+ border-radius: var(--radius-lg, 0.5rem);
2967
+ border-style: var(--tw-border-style);
2968
+ border-width: 1px;
2969
+ border-color: var(--color-border-secondary);
2970
+ }
2971
+ .GeckoUIRHFFilePicker__file-row {
2972
+ display: flex;
2973
+ align-items: center;
2974
+ gap: calc(var(--spacing, 0.25rem) * 3);
2975
+ border-bottom-style: var(--tw-border-style);
2976
+ border-bottom-width: 1px;
2977
+ border-color: var(--color-border-secondary);
2978
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
2979
+ padding-block: calc(var(--spacing, 0.25rem) * 3);
2980
+ &:last-child {
2981
+ border-bottom-style: var(--tw-border-style);
2982
+ border-bottom-width: 0px;
2983
+ }
2984
+ }
2985
+ .GeckoUIRHFFilePicker__file-row:hover {
2986
+ background-color: var(--color-surface-secondary);
2987
+ }
2988
+ .GeckoUIRHFFilePicker__file-name {
2989
+ flex: 1;
2990
+ overflow: hidden;
2991
+ text-overflow: ellipsis;
2992
+ white-space: nowrap;
2993
+ font-size: var(--text-sm, 0.875rem);
2994
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2995
+ color: var(--color-text-primary);
2996
+ }
2997
+ .GeckoUIRHFFilePicker__file-size {
2998
+ flex-shrink: 0;
2999
+ font-size: var(--text-xs, 0.75rem);
3000
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
3001
+ color: var(--color-text-muted);
3002
+ }
3003
+ .GeckoUIRHFFilePicker__file-remove {
3004
+ box-sizing: border-box;
3005
+ border-width: 0;
3006
+ border-style: solid;
3007
+ border-color: #e5e7eb;
3008
+ font-family: inherit;
3009
+ font-feature-settings: inherit;
3010
+ font-variation-settings: inherit;
3011
+ font-size: 100%;
3012
+ font-weight: inherit;
3013
+ line-height: inherit;
3014
+ letter-spacing: inherit;
3015
+ color: inherit;
3016
+ margin: 0;
3017
+ padding: 0;
3018
+ text-transform: none;
3019
+ -webkit-appearance: button;
3020
+ cursor: pointer;
3021
+ background-color: transparent;
3022
+ background-image: none;
3023
+ flex-shrink: 0;
3024
+ border-radius: 0.25rem;
3025
+ padding: calc(var(--spacing, 0.25rem) * 1);
3026
+ color: var(--color-text-muted);
3027
+ transition-property:
3028
+ color,
3029
+ background-color,
3030
+ border-color,
3031
+ outline-color,
3032
+ text-decoration-color,
3033
+ fill,
3034
+ stroke,
3035
+ --tw-gradient-from,
3036
+ --tw-gradient-via,
3037
+ --tw-gradient-to;
3038
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
3039
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
3040
+ --tw-duration: 200ms;
3041
+ transition-duration: 200ms;
3042
+ }
3043
+ .GeckoUIRHFFilePicker__file-remove:hover {
3044
+ background-color: var(--color-red-100, oklch(93.6% 0.032 17.717));
3045
+ color: var(--color-red-600, oklch(57.7% 0.245 27.325));
3046
+ }
3047
+ .GeckoUIRHFFilePicker__file-remove:focus-visible {
3048
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3049
+ box-shadow:
3050
+ var(--tw-inset-shadow),
3051
+ var(--tw-inset-ring-shadow),
3052
+ var(--tw-ring-offset-shadow),
3053
+ var(--tw-ring-shadow),
3054
+ var(--tw-shadow);
3055
+ --tw-ring-color: var(--color-red-400, oklch(70.4% 0.191 22.216));
3056
+ --tw-outline-style: none;
3057
+ outline-style: none;
3058
+ }
3059
+ .GeckoUIRHFFilePicker__file-remove-icon {
3060
+ height: calc(var(--spacing, 0.25rem) * 4);
3061
+ width: calc(var(--spacing, 0.25rem) * 4);
3062
+ }
3063
+ .GeckoUIRHFFilePicker__loading-overlay {
3064
+ pointer-events: none;
3065
+ position: absolute;
3066
+ inset: calc(var(--spacing, 0.25rem) * 0);
3067
+ display: flex;
3068
+ align-items: center;
3069
+ justify-content: center;
3070
+ border-radius: var(--radius-lg, 0.5rem);
3071
+ background-color: color-mix(in srgb, oklch(1 0 none) 50%, transparent);
3072
+ @supports (color: color-mix(in lab, red, red)) {
3073
+ background-color: color-mix(in oklab, var(--color-surface-primary) 50%, transparent);
3074
+ }
3075
+ }
3076
+ .GeckoUIRHFCounterInput[data-error] .GeckoUICounterInput__button,
3077
+ .GeckoUIRHFCounterInput[data-error] .GeckoUICounterInput__input {
3078
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
3079
+ }
3080
+ .GeckoUIRHFCounterInput[data-error]:hover .GeckoUICounterInput__button,
3081
+ .GeckoUIRHFCounterInput[data-error]:hover .GeckoUICounterInput__input {
3082
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
3083
+ }
3084
+ .GeckoUIRHFCounterInput[data-error]:focus-within .GeckoUICounterInput__button,
3085
+ .GeckoUIRHFCounterInput[data-error]:focus-within .GeckoUICounterInput__input {
3086
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
3087
+ }
3088
+ .GeckoUIRHFCurrencyInput__currency-symbol,
3089
+ .GeckoUIRHFCurrencyInput__currency-code {
3090
+ font-size: var(--text-sm, 0.875rem);
3091
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
3092
+ --tw-font-weight: var(--font-weight-normal, 400);
3093
+ font-weight: var(--font-weight-normal, 400);
3094
+ color: var(--color-text-muted);
3095
+ }
3096
+ * {
3097
+ box-sizing: border-box;
3098
+ }
3099
+ :root {
3100
+ --color-primary-50: oklch(0.9705 0.0142 254.6);
3101
+ --color-primary-100: oklch(0.9319 0.0316 255.59);
3102
+ --color-primary-200: oklch(0.8823 0.0571 254.13);
3103
+ --color-primary-300: oklch(0.8091 0.0956 251.81);
3104
+ --color-primary-400: oklch(0.7137 0.1434 254.62);
3105
+ --color-primary-500: oklch(0.6231 0.188 259.81);
3106
+ --color-primary-600: oklch(0.5461 0.2152 262.88);
3107
+ --color-primary-700: oklch(0.4882 0.2172 264.38);
3108
+ --color-primary-800: oklch(0.4244 0.1809 265.64);
3109
+ --color-primary-900: oklch(0.3791 0.1378 265.52);
3110
+ --color-primary-950: oklch(0.2823 0.0874 267.94);
3111
+ --color-surface-primary: oklch(1 0 none);
3112
+ --color-surface-secondary: oklch(0.9851 0 none);
3113
+ --color-surface-tertiary: oklch(0.9702 0 none);
3114
+ --color-surface-hover: oklch(0.9702 0 none);
3115
+ --color-surface-hover-strong: oklch(0.9401 0 none);
3116
+ --color-surface-active: oklch(0.8699 0 none);
3117
+ --color-surface-disabled: oklch(0.9401 0 none);
3118
+ --color-surface-overlay: oklch(0 0 none);
3119
+ --color-surface-autofill: oklch(0.9702 0 none);
3120
+ --color-surface-emphasis: oklch(0.4461 0.0263 256.8);
3121
+ --color-text-primary: oklch(0.2046 0 none);
3122
+ --color-text-secondary: oklch(0.3715 0 none);
3123
+ --color-text-tertiary: oklch(0.5555 0 none);
3124
+ --color-text-disabled: oklch(0.7155 0 none);
3125
+ --color-text-placeholder: oklch(0.7155 0 none);
3126
+ --color-text-inverse: oklch(0.9851 0 none);
3127
+ --color-text-muted: oklch(0.5555 0 none);
3128
+ --color-text-on-primary: oklch(1 0 none);
3129
+ --color-border-primary: oklch(0.9401 0 none);
3130
+ --color-border-secondary: oklch(0.8699 0 none);
3131
+ --color-border-focus: oklch(0.7155 0 none);
3132
+ --color-border-hover: oklch(0.8699 0 none);
3133
+ --color-border-disabled: oklch(0.9401 0 none);
3134
+ --gecko-ui-scrollbar-track: oklch(0 0 none);
3135
+ --gecko-ui-scrollbar-thumb: oklch(0.8717 0.0093 258.34);
3136
+ --gecko-ui-scrollbar-thumb-hover: oklch(0.7137 0.0192 261.32);
3137
+ }
3138
+ .dark {
3139
+ --color-surface-primary: oklch(0.2046 0 none);
3140
+ --color-surface-secondary: oklch(0.2435 0 none);
3141
+ --color-surface-tertiary: oklch(0.2972 0 none);
3142
+ --color-surface-hover: oklch(0.2972 0 none);
3143
+ --color-surface-hover-strong: oklch(0.3715 0 none);
3144
+ --color-surface-active: oklch(0.5555 0 none);
3145
+ --color-surface-disabled: oklch(0.2972 0 none);
3146
+ --color-surface-overlay: oklch(0 0 none);
3147
+ --color-surface-autofill: oklch(0.2435 0 none);
3148
+ --color-surface-emphasis: oklch(0.7748 0.0054 247.89);
3149
+ --color-text-primary: oklch(0.9851 0 none);
3150
+ --color-text-secondary: oklch(0.8699 0 none);
3151
+ --color-text-tertiary: oklch(0.7155 0 none);
3152
+ --color-text-disabled: oklch(0.5555 0 none);
3153
+ --color-text-placeholder: oklch(0.5555 0 none);
3154
+ --color-text-inverse: oklch(0.2046 0 none);
3155
+ --color-text-muted: oklch(0.7155 0 none);
3156
+ --color-border-primary: oklch(0.4676 0 none);
3157
+ --color-border-secondary: oklch(0.4676 0 none);
3158
+ --color-border-focus: oklch(0.5555 0 none);
3159
+ --color-border-hover: oklch(0.7155 0 none);
3160
+ --color-border-disabled: oklch(0.2972 0 none);
3161
+ --gecko-ui-scrollbar-track: oklch(0 0 none);
3162
+ --gecko-ui-scrollbar-thumb: oklch(0.4461 0.0263 256.8);
3163
+ --gecko-ui-scrollbar-thumb-hover: oklch(0.551 0.0234 264.36);
3164
+ }
3165
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
3166
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3167
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
3168
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3169
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3170
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
3171
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3172
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
3173
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3174
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
3175
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3176
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
3177
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
3178
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
3179
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3180
+ @property --tw-duration { syntax: "*"; inherits: false; }
3181
+ @property --tw-ease { syntax: "*"; inherits: false; }
3182
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
3183
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
3184
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
3185
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
3186
+ @property --tw-rotate-x { syntax: "*"; inherits: false; }
3187
+ @property --tw-rotate-y { syntax: "*"; inherits: false; }
3188
+ @property --tw-rotate-z { syntax: "*"; inherits: false; }
3189
+ @property --tw-skew-x { syntax: "*"; inherits: false; }
3190
+ @property --tw-skew-y { syntax: "*"; inherits: false; }
3191
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
3192
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
3193
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
3194
+ @property --tw-leading { syntax: "*"; inherits: false; }
3195
+ @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
3196
+ @keyframes spin {
3197
+ to {
3198
+ transform: rotate(360deg);
3199
+ }
3200
+ }
3201
+ @layer properties {
3202
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3203
+ *,
3204
+ ::before,
3205
+ ::after,
3206
+ ::backdrop {
3207
+ --tw-border-style: solid;
3208
+ --tw-shadow: 0 0 #0000;
3209
+ --tw-shadow-color: initial;
3210
+ --tw-shadow-alpha: 100%;
3211
+ --tw-inset-shadow: 0 0 #0000;
3212
+ --tw-inset-shadow-color: initial;
3213
+ --tw-inset-shadow-alpha: 100%;
3214
+ --tw-ring-color: initial;
3215
+ --tw-ring-shadow: 0 0 #0000;
3216
+ --tw-inset-ring-color: initial;
3217
+ --tw-inset-ring-shadow: 0 0 #0000;
3218
+ --tw-ring-inset: initial;
3219
+ --tw-ring-offset-width: 0px;
3220
+ --tw-ring-offset-color: #fff;
3221
+ --tw-ring-offset-shadow: 0 0 #0000;
3222
+ --tw-duration: initial;
3223
+ --tw-ease: initial;
3224
+ --tw-scale-x: 1;
3225
+ --tw-scale-y: 1;
3226
+ --tw-scale-z: 1;
3227
+ --tw-font-weight: initial;
3228
+ --tw-rotate-x: initial;
3229
+ --tw-rotate-y: initial;
3230
+ --tw-rotate-z: initial;
3231
+ --tw-skew-x: initial;
3232
+ --tw-skew-y: initial;
3233
+ --tw-translate-x: 0;
3234
+ --tw-translate-y: 0;
3235
+ --tw-translate-z: 0;
3236
+ --tw-leading: initial;
3237
+ --tw-space-x-reverse: 0;
3238
+ }
3239
+ }
3240
+ }
3241
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */