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