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