@sanity/themer 0.7.0 → 0.8.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.
package/dist/bundle.css CHANGED
@@ -1 +1,745 @@
1
- ._1o50s7t0{scrollbar-gutter:stable}._1aa9huua{aspect-ratio:16/9;position:relative;overflow:hidden}._1aa9huub{background:var(--_1aa9huu0);flex-direction:column;display:flex;position:absolute;inset:0}._1aa9huud{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}._1aa9huue{border-bottom:1px solid var(--_1aa9huu3);flex:none;align-items:center;gap:5px;height:18%;padding:0 5%;display:flex}._1aa9huuf{background:var(--_1aa9huu4);border-radius:2px;flex:none;width:8px;height:8px}._1aa9huug{flex:1}._1aa9huuh{background:var(--_1aa9huu5);border-radius:50%;flex:none;width:8px;height:8px}._1aa9huui{flex:1;min-height:0;display:flex}._1aa9huuj{border-right:1px solid var(--_1aa9huu3);flex-direction:column;flex:none;width:36%;display:flex}._1aa9huuk{flex:none;align-items:center;height:18%;padding:0 9%;display:flex}._1aa9huuk[data-selected=true]{background:var(--_1aa9huu6)}._1aa9huul{flex-direction:column;flex:1;min-width:0;display:flex}._1aa9huum{flex-direction:column;flex:1;gap:7px;min-height:0;padding:9% 8% 0;display:flex;overflow:hidden}._1aa9huun{flex-direction:column;flex:none;gap:3px;display:flex}._1aa9huuo{background:var(--_1aa9huu8);height:12px;box-shadow:inset 0 0 0 1px var(--_1aa9huu9);border-radius:3px}._1aa9huup{border-top:1px solid var(--_1aa9huu3);flex:none;justify-content:flex-end;align-items:center;height:20%;padding:0 8%;display:flex}._1aa9huuq{background:var(--_1aa9huu4);border-radius:3px;width:32%;height:50%}._1aa9huur{border-radius:2px;flex:none;height:4px}._1aa9huus{background:var(--_1aa9huu1)}._1aa9huut{background:var(--_1aa9huu2)}._1aa9huuu{background:var(--_1aa9huu7)}._1vdkp0v0{opacity:.6}._17s80v42{grid-template-columns:repeat(3,24px);grid-auto-rows:24px;gap:4px;display:grid}._17s80v42[data-with-image=true]{grid-template-columns:52px repeat(3,24px)}._17s80v43{object-fit:cover;width:52px;height:52px;box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;grid-row:span 2;display:block}._17s80v44{box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;display:block}._17s80v44[data-empty=true]{background:repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px)}._17s80v45{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:8px;margin:0 -12px;padding:0 12px;scroll-padding-left:12px;display:flex;overflow-x:auto}._17s80v46{appearance:none;box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);color:inherit;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;background:0 0;border:0;flex:none;margin:0;padding:0;display:block}._17s80v46:focus{outline:none}._17s80v47{box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);height:calc(var(--_17s80v40) * 9 / 16 + 8px);border-radius:7px;padding:4px;transition:box-shadow .1s;display:block;overflow:hidden}._17s80v46:hover ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-border-color)}._17s80v46[aria-pressed=true] ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._17s80v46:focus-visible ._17s80v47{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._17s80v48{width:144px;transform:scale(var(--_17s80v41));transform-origin:0 0;display:block}.os3rj0{box-sizing:border-box;border:1px solid var(--card-border-color);cursor:pointer;background:0 0;border-radius:4px;flex:none;width:33px;height:33px;padding:0}.os3rj0::-webkit-color-swatch-wrapper{padding:0}.os3rj0::-webkit-color-swatch{border:none;border-radius:3px}.os3rj0::-moz-color-swatch{border:none;border-radius:3px}.os3rj1{width:100%;accent-color:var(--card-focus-ring-color);margin:0;display:block}.os3rj2{min-width:0}._1wsn7880{position:relative}._1wsn7881{appearance:none;box-sizing:border-box;width:100%;color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:block}._1wsn7881:focus{outline:none}._1wsn7882{border-radius:10px;padding:4px;transition:box-shadow .1s;display:block}._1wsn7881:hover ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-border-color)}._1wsn7881[aria-pressed=true] ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._1wsn7881:focus-visible ._1wsn7882{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._1wsn7883{opacity:0;transition:opacity .1s;position:absolute;top:10px;right:10px}._1wsn7880:hover ._1wsn7883,._1wsn7880:focus-within ._1wsn7883,._1wsn7883[data-visible=true]{opacity:1}._1wsn7884{display:inline-block}.bgn4np2{view-transition-name:bgn4np0;flex:none}.bgn4np2[data-overlay=true]{width:auto;position:absolute;inset:0}.bgn4np3{position:relative}.bgn4np4{container:bgn4np1/inline-size}.bgn4np5{z-index:1;cursor:col-resize;touch-action:none;width:7px;position:absolute;top:0;bottom:0;left:-3px}.bgn4np5:after{content:"";background:var(--card-focus-ring-color);opacity:0;width:3px;transition:opacity .1s;position:absolute;top:0;bottom:0;left:2px}.bgn4np5:focus{outline:none}.bgn4np5:hover:after,.bgn4np5:focus-visible:after,.bgn4np5[data-dragging=true]:after{opacity:1}.twjqgh0{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@container bgn4np1 (width>=260px){.twjqgh0{grid-template-columns:repeat(2,minmax(0,1fr))}}@container bgn4np1 (width>=480px){.twjqgh0{grid-template-columns:repeat(3,minmax(0,1fr))}}.c2pqej0{min-width:0}@keyframes _1yq4ar7b{0%{transform:translate(-100%)}}@keyframes _1yq4ar7c{to{transform:translate(-100%)}}@keyframes _1yq4ar7d{0%{transform:translateY(-100%)}}@keyframes _1yq4ar7e{to{transform:translateY(-100%)}}@keyframes _1yq4ar7f{0%{transform:translate(100%)}}@keyframes _1yq4ar7g{to{transform:translate(100%)}}._1yq4ar78{position:relative}._1yq4ar79{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}._1yq4ar7a{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}::view-transition-group(._1yq4ar70){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar70){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar70){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar72){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar73){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar74){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar75){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar76){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar77){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar71){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar71){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar70){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar70){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar72){animation-name:_1yq4ar7b}::view-transition-old(._1yq4ar73){animation-name:_1yq4ar7c}::view-transition-new(._1yq4ar74){animation-name:_1yq4ar7d}::view-transition-old(._1yq4ar75){animation-name:_1yq4ar7e}::view-transition-new(._1yq4ar76){animation-name:_1yq4ar7f}::view-transition-old(._1yq4ar77){animation-name:_1yq4ar7g}::view-transition-group(bgn4np0){z-index:1}::view-transition-group(bgn4np0){animation:none}::view-transition-image-pair(bgn4np0){animation:none}::view-transition-old(bgn4np0){animation:none}::view-transition-new(bgn4np0){animation:none}@media (prefers-reduced-motion:reduce){::view-transition-group(._1yq4ar70){animation:none}::view-transition-group(._1yq4ar71){animation:none}::view-transition-group(._1yq4ar72){animation:none}::view-transition-group(._1yq4ar73){animation:none}::view-transition-group(._1yq4ar74){animation:none}::view-transition-group(._1yq4ar75){animation:none}::view-transition-group(._1yq4ar76){animation:none}::view-transition-group(._1yq4ar77){animation:none}::view-transition-group(bgn4np0){animation:none}::view-transition-image-pair(._1yq4ar70){animation:none}::view-transition-image-pair(._1yq4ar71){animation:none}::view-transition-image-pair(._1yq4ar72){animation:none}::view-transition-image-pair(._1yq4ar73){animation:none}::view-transition-image-pair(._1yq4ar74){animation:none}::view-transition-image-pair(._1yq4ar75){animation:none}::view-transition-image-pair(._1yq4ar76){animation:none}::view-transition-image-pair(._1yq4ar77){animation:none}::view-transition-image-pair(bgn4np0){animation:none}::view-transition-old(._1yq4ar70){animation:none}::view-transition-old(._1yq4ar71){animation:none}::view-transition-old(._1yq4ar72){animation:none}::view-transition-old(._1yq4ar73){animation:none}::view-transition-old(._1yq4ar74){animation:none}::view-transition-old(._1yq4ar75){animation:none}::view-transition-old(._1yq4ar76){animation:none}::view-transition-old(._1yq4ar77){animation:none}::view-transition-old(bgn4np0){animation:none}::view-transition-new(._1yq4ar70){animation:none}::view-transition-new(._1yq4ar71){animation:none}::view-transition-new(._1yq4ar72){animation:none}::view-transition-new(._1yq4ar73){animation:none}::view-transition-new(._1yq4ar74){animation:none}::view-transition-new(._1yq4ar75){animation:none}::view-transition-new(._1yq4ar76){animation:none}::view-transition-new(._1yq4ar77){animation:none}::view-transition-new(bgn4np0){animation:none}}
1
+ .bgn4np2 {
2
+ view-transition-name: bgn4np0;
3
+ flex: none;
4
+ }
5
+
6
+ .bgn4np2[data-overlay="true"] {
7
+ width: auto;
8
+ position: absolute;
9
+ inset: 0;
10
+ }
11
+
12
+ .bgn4np3 {
13
+ position: relative;
14
+ }
15
+
16
+ .bgn4np4 {
17
+ container: bgn4np1 / inline-size;
18
+ }
19
+
20
+ .bgn4np5 {
21
+ z-index: 1;
22
+ cursor: col-resize;
23
+ touch-action: none;
24
+ width: 7px;
25
+ position: absolute;
26
+ top: 0;
27
+ bottom: 0;
28
+ left: -3px;
29
+ }
30
+
31
+ .bgn4np5:after {
32
+ content: "";
33
+ background: var(--card-focus-ring-color);
34
+ opacity: 0;
35
+ width: 3px;
36
+ transition: opacity .1s;
37
+ position: absolute;
38
+ top: 0;
39
+ bottom: 0;
40
+ left: 2px;
41
+ }
42
+
43
+ .bgn4np5:focus {
44
+ outline: none;
45
+ }
46
+
47
+ .bgn4np5:hover:after, .bgn4np5:focus-visible:after, .bgn4np5[data-dragging="true"]:after {
48
+ opacity: 1;
49
+ }
50
+
51
+ @keyframes _1yq4ar7b {
52
+ from {
53
+ transform: translateX(-100%);
54
+ }
55
+ }
56
+
57
+ @keyframes _1yq4ar7c {
58
+ to {
59
+ transform: translateX(-100%);
60
+ }
61
+ }
62
+
63
+ @keyframes _1yq4ar7d {
64
+ from {
65
+ transform: translateY(-100%);
66
+ }
67
+ }
68
+
69
+ @keyframes _1yq4ar7e {
70
+ to {
71
+ transform: translateY(-100%);
72
+ }
73
+ }
74
+
75
+ @keyframes _1yq4ar7f {
76
+ from {
77
+ transform: translateX(100%);
78
+ }
79
+ }
80
+
81
+ @keyframes _1yq4ar7g {
82
+ to {
83
+ transform: translateX(100%);
84
+ }
85
+ }
86
+
87
+ ._1yq4ar78 {
88
+ position: relative;
89
+ }
90
+
91
+ ._1yq4ar79 {
92
+ color-scheme: light;
93
+ }
94
+
95
+ ._1yq4ar7a {
96
+ color-scheme: dark;
97
+ }
98
+
99
+ ::view-transition-group(._1yq4ar70) {
100
+ animation-duration: .32s;
101
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
102
+ }
103
+
104
+ ::view-transition-old(._1yq4ar70) {
105
+ animation-duration: .32s;
106
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
107
+ }
108
+
109
+ ::view-transition-new(._1yq4ar70) {
110
+ animation-duration: .32s;
111
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
112
+ }
113
+
114
+ ::view-transition-new(._1yq4ar72) {
115
+ animation-duration: .32s;
116
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
117
+ }
118
+
119
+ ::view-transition-old(._1yq4ar73) {
120
+ animation-duration: .32s;
121
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
122
+ }
123
+
124
+ ::view-transition-new(._1yq4ar74) {
125
+ animation-duration: .32s;
126
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
127
+ }
128
+
129
+ ::view-transition-old(._1yq4ar75) {
130
+ animation-duration: .32s;
131
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
132
+ }
133
+
134
+ ::view-transition-new(._1yq4ar76) {
135
+ animation-duration: .32s;
136
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
137
+ }
138
+
139
+ ::view-transition-old(._1yq4ar77) {
140
+ animation-duration: .32s;
141
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
142
+ }
143
+
144
+ ::view-transition-old(._1yq4ar71) {
145
+ animation-duration: .32s;
146
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
147
+ }
148
+
149
+ ::view-transition-new(._1yq4ar71) {
150
+ animation-duration: .32s;
151
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
152
+ }
153
+
154
+ :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
155
+ animation-duration: .32s;
156
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
157
+ }
158
+
159
+ :root:active-view-transition-type(sanity-themer)::view-transition-old(*) {
160
+ animation-duration: .32s;
161
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
162
+ }
163
+
164
+ :root:active-view-transition-type(sanity-themer)::view-transition-new(*) {
165
+ animation-duration: .32s;
166
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
167
+ }
168
+
169
+ ::view-transition-old(._1yq4ar70) {
170
+ object-fit: fill;
171
+ block-size: 100%;
172
+ inline-size: 100%;
173
+ }
174
+
175
+ ::view-transition-new(._1yq4ar70) {
176
+ object-fit: fill;
177
+ block-size: 100%;
178
+ inline-size: 100%;
179
+ }
180
+
181
+ ::view-transition-new(._1yq4ar72) {
182
+ animation-name: _1yq4ar7b;
183
+ }
184
+
185
+ ::view-transition-old(._1yq4ar73) {
186
+ animation-name: _1yq4ar7c;
187
+ }
188
+
189
+ ::view-transition-new(._1yq4ar74) {
190
+ animation-name: _1yq4ar7d;
191
+ }
192
+
193
+ ::view-transition-old(._1yq4ar75) {
194
+ animation-name: _1yq4ar7e;
195
+ }
196
+
197
+ ::view-transition-new(._1yq4ar76) {
198
+ animation-name: _1yq4ar7f;
199
+ }
200
+
201
+ ::view-transition-old(._1yq4ar77) {
202
+ animation-name: _1yq4ar7g;
203
+ }
204
+
205
+ ::view-transition-group(bgn4np0) {
206
+ z-index: 1;
207
+ }
208
+
209
+ ::view-transition-group(bgn4np0) {
210
+ animation: none;
211
+ }
212
+
213
+ ::view-transition-image-pair(bgn4np0) {
214
+ animation: none;
215
+ }
216
+
217
+ ::view-transition-old(bgn4np0) {
218
+ animation: none;
219
+ }
220
+
221
+ ::view-transition-new(bgn4np0) {
222
+ animation: none;
223
+ }
224
+
225
+ @media (prefers-reduced-motion: reduce) {
226
+ ::view-transition-group(._1yq4ar70) {
227
+ animation: none;
228
+ }
229
+
230
+ ::view-transition-group(._1yq4ar71) {
231
+ animation: none;
232
+ }
233
+
234
+ ::view-transition-group(._1yq4ar72) {
235
+ animation: none;
236
+ }
237
+
238
+ ::view-transition-group(._1yq4ar73) {
239
+ animation: none;
240
+ }
241
+
242
+ ::view-transition-group(._1yq4ar74) {
243
+ animation: none;
244
+ }
245
+
246
+ ::view-transition-group(._1yq4ar75) {
247
+ animation: none;
248
+ }
249
+
250
+ ::view-transition-group(._1yq4ar76) {
251
+ animation: none;
252
+ }
253
+
254
+ ::view-transition-group(._1yq4ar77) {
255
+ animation: none;
256
+ }
257
+
258
+ ::view-transition-group(bgn4np0) {
259
+ animation: none;
260
+ }
261
+
262
+ :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
263
+ animation: none;
264
+ }
265
+
266
+ ::view-transition-image-pair(._1yq4ar70) {
267
+ animation: none;
268
+ }
269
+
270
+ ::view-transition-image-pair(._1yq4ar71) {
271
+ animation: none;
272
+ }
273
+
274
+ ::view-transition-image-pair(._1yq4ar72) {
275
+ animation: none;
276
+ }
277
+
278
+ ::view-transition-image-pair(._1yq4ar73) {
279
+ animation: none;
280
+ }
281
+
282
+ ::view-transition-image-pair(._1yq4ar74) {
283
+ animation: none;
284
+ }
285
+
286
+ ::view-transition-image-pair(._1yq4ar75) {
287
+ animation: none;
288
+ }
289
+
290
+ ::view-transition-image-pair(._1yq4ar76) {
291
+ animation: none;
292
+ }
293
+
294
+ ::view-transition-image-pair(._1yq4ar77) {
295
+ animation: none;
296
+ }
297
+
298
+ ::view-transition-image-pair(bgn4np0) {
299
+ animation: none;
300
+ }
301
+
302
+ :root:active-view-transition-type(sanity-themer)::view-transition-image-pair(*) {
303
+ animation: none;
304
+ }
305
+
306
+ ::view-transition-old(._1yq4ar70) {
307
+ animation: none;
308
+ }
309
+
310
+ ::view-transition-old(._1yq4ar71) {
311
+ animation: none;
312
+ }
313
+
314
+ ::view-transition-old(._1yq4ar72) {
315
+ animation: none;
316
+ }
317
+
318
+ ::view-transition-old(._1yq4ar73) {
319
+ animation: none;
320
+ }
321
+
322
+ ::view-transition-old(._1yq4ar74) {
323
+ animation: none;
324
+ }
325
+
326
+ ::view-transition-old(._1yq4ar75) {
327
+ animation: none;
328
+ }
329
+
330
+ ::view-transition-old(._1yq4ar76) {
331
+ animation: none;
332
+ }
333
+
334
+ ::view-transition-old(._1yq4ar77) {
335
+ animation: none;
336
+ }
337
+
338
+ ::view-transition-old(bgn4np0) {
339
+ animation: none;
340
+ }
341
+
342
+ :root:active-view-transition-type(sanity-themer)::view-transition-old(*) {
343
+ animation: none;
344
+ }
345
+
346
+ ::view-transition-new(._1yq4ar70) {
347
+ animation: none;
348
+ }
349
+
350
+ ::view-transition-new(._1yq4ar71) {
351
+ animation: none;
352
+ }
353
+
354
+ ::view-transition-new(._1yq4ar72) {
355
+ animation: none;
356
+ }
357
+
358
+ ::view-transition-new(._1yq4ar73) {
359
+ animation: none;
360
+ }
361
+
362
+ ::view-transition-new(._1yq4ar74) {
363
+ animation: none;
364
+ }
365
+
366
+ ::view-transition-new(._1yq4ar75) {
367
+ animation: none;
368
+ }
369
+
370
+ ::view-transition-new(._1yq4ar76) {
371
+ animation: none;
372
+ }
373
+
374
+ ::view-transition-new(._1yq4ar77) {
375
+ animation: none;
376
+ }
377
+
378
+ ::view-transition-new(bgn4np0) {
379
+ animation: none;
380
+ }
381
+
382
+ :root:active-view-transition-type(sanity-themer)::view-transition-new(*) {
383
+ animation: none;
384
+ }
385
+ }
386
+
387
+ ._1o50s7t0 {
388
+ scrollbar-gutter: stable;
389
+ }
390
+
391
+ ._1aa9huua {
392
+ aspect-ratio: 16 / 9;
393
+ position: relative;
394
+ overflow: hidden;
395
+ }
396
+
397
+ ._1aa9huub {
398
+ background: var(--_1aa9huu0);
399
+ flex-direction: column;
400
+ display: flex;
401
+ position: absolute;
402
+ inset: 0;
403
+ }
404
+
405
+ ._1aa9huud {
406
+ clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
407
+ }
408
+
409
+ ._1aa9huue {
410
+ border-bottom: 1px solid var(--_1aa9huu3);
411
+ flex: none;
412
+ align-items: center;
413
+ gap: 5px;
414
+ height: 18%;
415
+ padding: 0 5%;
416
+ display: flex;
417
+ }
418
+
419
+ ._1aa9huuf {
420
+ background: var(--_1aa9huu4);
421
+ border-radius: 2px;
422
+ flex: none;
423
+ width: 8px;
424
+ height: 8px;
425
+ }
426
+
427
+ ._1aa9huug {
428
+ flex: 1;
429
+ }
430
+
431
+ ._1aa9huuh {
432
+ background: var(--_1aa9huu5);
433
+ border-radius: 50%;
434
+ flex: none;
435
+ width: 8px;
436
+ height: 8px;
437
+ }
438
+
439
+ ._1aa9huui {
440
+ flex: 1;
441
+ min-height: 0;
442
+ display: flex;
443
+ }
444
+
445
+ ._1aa9huuj {
446
+ border-right: 1px solid var(--_1aa9huu3);
447
+ flex-direction: column;
448
+ flex: none;
449
+ width: 36%;
450
+ display: flex;
451
+ }
452
+
453
+ ._1aa9huuk {
454
+ flex: none;
455
+ align-items: center;
456
+ height: 18%;
457
+ padding: 0 9%;
458
+ display: flex;
459
+ }
460
+
461
+ ._1aa9huuk[data-selected="true"] {
462
+ background: var(--_1aa9huu6);
463
+ }
464
+
465
+ ._1aa9huul {
466
+ flex-direction: column;
467
+ flex: 1;
468
+ min-width: 0;
469
+ display: flex;
470
+ }
471
+
472
+ ._1aa9huum {
473
+ flex-direction: column;
474
+ flex: 1;
475
+ gap: 7px;
476
+ min-height: 0;
477
+ padding: 9% 8% 0;
478
+ display: flex;
479
+ overflow: hidden;
480
+ }
481
+
482
+ ._1aa9huun {
483
+ flex-direction: column;
484
+ flex: none;
485
+ gap: 3px;
486
+ display: flex;
487
+ }
488
+
489
+ ._1aa9huuo {
490
+ background: var(--_1aa9huu8);
491
+ height: 12px;
492
+ box-shadow: inset 0 0 0 1px var(--_1aa9huu9);
493
+ border-radius: 3px;
494
+ }
495
+
496
+ ._1aa9huup {
497
+ border-top: 1px solid var(--_1aa9huu3);
498
+ flex: none;
499
+ justify-content: flex-end;
500
+ align-items: center;
501
+ height: 20%;
502
+ padding: 0 8%;
503
+ display: flex;
504
+ }
505
+
506
+ ._1aa9huuq {
507
+ background: var(--_1aa9huu4);
508
+ border-radius: 3px;
509
+ width: 32%;
510
+ height: 50%;
511
+ }
512
+
513
+ ._1aa9huur {
514
+ border-radius: 2px;
515
+ flex: none;
516
+ height: 4px;
517
+ }
518
+
519
+ ._1aa9huus {
520
+ background: var(--_1aa9huu1);
521
+ }
522
+
523
+ ._1aa9huut {
524
+ background: var(--_1aa9huu2);
525
+ }
526
+
527
+ ._1aa9huuu {
528
+ background: var(--_1aa9huu7);
529
+ }
530
+
531
+ ._1vdkp0v0 {
532
+ opacity: .6;
533
+ }
534
+
535
+ ._17s80v42 {
536
+ grid-template-columns: repeat(3, 24px);
537
+ grid-auto-rows: 24px;
538
+ gap: 4px;
539
+ display: grid;
540
+ }
541
+
542
+ ._17s80v42[data-with-image="true"] {
543
+ grid-template-columns: 52px repeat(3, 24px);
544
+ }
545
+
546
+ ._17s80v43 {
547
+ object-fit: cover;
548
+ width: 52px;
549
+ height: 52px;
550
+ box-shadow: inset 0 0 0 1px var(--card-border-color);
551
+ border-radius: 3px;
552
+ grid-row: span 2;
553
+ display: block;
554
+ }
555
+
556
+ ._17s80v44 {
557
+ box-shadow: inset 0 0 0 1px var(--card-border-color);
558
+ border-radius: 3px;
559
+ display: block;
560
+ }
561
+
562
+ ._17s80v44[data-empty="true"] {
563
+ background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px);
564
+ }
565
+
566
+ ._17s80v45 {
567
+ scroll-snap-type: x mandatory;
568
+ scrollbar-width: thin;
569
+ gap: 8px;
570
+ margin: 0 -12px;
571
+ padding: 0 12px;
572
+ scroll-padding-left: 12px;
573
+ display: flex;
574
+ overflow-x: auto;
575
+ }
576
+
577
+ ._17s80v46 {
578
+ appearance: none;
579
+ box-sizing: border-box;
580
+ width: calc(var(--_17s80v40) + 8px);
581
+ color: inherit;
582
+ font: inherit;
583
+ text-align: center;
584
+ cursor: pointer;
585
+ scroll-snap-align: start;
586
+ background: none;
587
+ border: 0;
588
+ flex: none;
589
+ margin: 0;
590
+ padding: 0;
591
+ display: block;
592
+ }
593
+
594
+ ._17s80v46:focus {
595
+ outline: none;
596
+ }
597
+
598
+ ._17s80v47 {
599
+ box-sizing: border-box;
600
+ width: calc(var(--_17s80v40) + 8px);
601
+ height: calc(var(--_17s80v40) * 9 / 16 + 8px);
602
+ border-radius: 7px;
603
+ padding: 4px;
604
+ transition: box-shadow .1s;
605
+ display: block;
606
+ overflow: hidden;
607
+ }
608
+
609
+ ._17s80v46:hover ._17s80v47 {
610
+ box-shadow: inset 0 0 0 2px var(--card-border-color);
611
+ }
612
+
613
+ ._17s80v46[aria-pressed="true"] ._17s80v47 {
614
+ box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
615
+ }
616
+
617
+ ._17s80v46:focus-visible ._17s80v47 {
618
+ outline: 2px solid var(--card-focus-ring-color);
619
+ outline-offset: -2px;
620
+ }
621
+
622
+ ._17s80v48 {
623
+ width: 144px;
624
+ transform: scale(var(--_17s80v41));
625
+ transform-origin: 0 0;
626
+ display: block;
627
+ }
628
+
629
+ .os3rj0 {
630
+ box-sizing: border-box;
631
+ border: 1px solid var(--card-border-color);
632
+ cursor: pointer;
633
+ background: none;
634
+ border-radius: 4px;
635
+ flex: none;
636
+ width: 33px;
637
+ height: 33px;
638
+ padding: 0;
639
+ }
640
+
641
+ .os3rj0::-webkit-color-swatch-wrapper {
642
+ padding: 0;
643
+ }
644
+
645
+ .os3rj0::-webkit-color-swatch {
646
+ border: none;
647
+ border-radius: 3px;
648
+ }
649
+
650
+ .os3rj0::-moz-color-swatch {
651
+ border: none;
652
+ border-radius: 3px;
653
+ }
654
+
655
+ .os3rj1 {
656
+ width: 100%;
657
+ accent-color: var(--card-focus-ring-color);
658
+ margin: 0;
659
+ display: block;
660
+ }
661
+
662
+ .os3rj2 {
663
+ min-width: 0;
664
+ }
665
+
666
+ ._1wsn7880 {
667
+ position: relative;
668
+ }
669
+
670
+ ._1wsn7881 {
671
+ appearance: none;
672
+ box-sizing: border-box;
673
+ width: 100%;
674
+ color: inherit;
675
+ font: inherit;
676
+ text-align: center;
677
+ cursor: pointer;
678
+ background: none;
679
+ border: 0;
680
+ margin: 0;
681
+ padding: 0;
682
+ display: block;
683
+ }
684
+
685
+ ._1wsn7881:focus {
686
+ outline: none;
687
+ }
688
+
689
+ ._1wsn7882 {
690
+ border-radius: 10px;
691
+ padding: 4px;
692
+ transition: box-shadow .1s;
693
+ display: block;
694
+ }
695
+
696
+ ._1wsn7881:hover ._1wsn7882 {
697
+ box-shadow: inset 0 0 0 2px var(--card-border-color);
698
+ }
699
+
700
+ ._1wsn7881[aria-pressed="true"] ._1wsn7882 {
701
+ box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
702
+ }
703
+
704
+ ._1wsn7881:focus-visible ._1wsn7882 {
705
+ outline: 2px solid var(--card-focus-ring-color);
706
+ outline-offset: -2px;
707
+ }
708
+
709
+ ._1wsn7883 {
710
+ opacity: 0;
711
+ transition: opacity .1s;
712
+ position: absolute;
713
+ top: 10px;
714
+ right: 10px;
715
+ }
716
+
717
+ ._1wsn7880:hover ._1wsn7883, ._1wsn7880:focus-within ._1wsn7883, ._1wsn7883[data-visible="true"] {
718
+ opacity: 1;
719
+ }
720
+
721
+ ._1wsn7884 {
722
+ display: inline-block;
723
+ }
724
+
725
+ .twjqgh0 {
726
+ grid-template-columns: minmax(0, 1fr);
727
+ gap: 16px;
728
+ display: grid;
729
+ }
730
+
731
+ @container bgn4np1 (width >= 260px) {
732
+ .twjqgh0 {
733
+ grid-template-columns: repeat(2, minmax(0, 1fr));
734
+ }
735
+ }
736
+
737
+ @container bgn4np1 (width >= 480px) {
738
+ .twjqgh0 {
739
+ grid-template-columns: repeat(3, minmax(0, 1fr));
740
+ }
741
+ }
742
+
743
+ .c2pqej0 {
744
+ min-width: 0;
745
+ }