@rogieking/figui3 3.16.0 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +725 -643
  2. package/components.css +1 -21
  3. package/dist/base.css +1 -99
  4. package/dist/components.css +1 -3978
  5. package/dist/fig.css +1 -2
  6. package/dist/fig.js +80 -78
  7. package/fig.js +209 -151
  8. package/package.json +14 -9
package/dist/components.css CHANGED
@@ -1,3978 +1 @@
1
- :root {
2
- color-scheme: light dark;
3
-
4
- /* Background Colors */
5
- --figma-color-bg: light-dark(#ffffff, #2c2c2c);
6
- --figma-color-bg-brand: light-dark(#0d99ff, #0c8ce9);
7
- --figma-color-bg-menu: #1e1e1e;
8
- --figma-color-bg-menu-hover: #0c8ce9;
9
- --figma-color-bg-brand-hover: light-dark(#007be5, #0a6dc2);
10
- --figma-color-bg-brand-pressed: light-dark(#0768cf, #105cad);
11
- --figma-color-bg-brand-secondary: light-dark(#0768cf, #105cad);
12
- --figma-color-bg-brand-tertiary: light-dark(#e5f4ff, #394360);
13
- --figma-color-bg-component: light-dark(#9747ff, #8a38f5);
14
- --figma-color-bg-component-hover: light-dark(#8638e5, #7a2ed6);
15
- --figma-color-bg-component-pressed: light-dark(#8638e5, #7a2ed6);
16
- --figma-color-bg-component-secondary: light-dark(#7c2bda, #652ca8);
17
- --figma-color-bg-component-tertiary: light-dark(#f1e5ff, #473956);
18
- --figma-color-bg-danger: light-dark(#f24822, #e03e1a);
19
- --figma-color-bg-danger-hover: light-dark(#dc3412, #c4381c);
20
- --figma-color-bg-danger-pressed: light-dark(#dc3412, #c4381c);
21
- --figma-color-bg-danger-secondary: light-dark(#bd2915, #963323);
22
- --figma-color-bg-danger-tertiary: light-dark(#ffe2e0, #60332a);
23
- --figma-color-bg-disabled: light-dark(#d9d9d9, #757575);
24
- --figma-color-bg-disabled-secondary: #b3b3b3;
25
- --figma-color-bg-hover: light-dark(#f5f5f5, #383838);
26
- --figma-color-bg-inverse: light-dark(#2c2c2c, #ffffff);
27
- --figma-color-bg-onselected: light-dark(#bde3ff, #667799);
28
- --figma-color-bg-onselected-hover: light-dark(#bde3ff, #667799);
29
- --figma-color-bg-onselected-pressed: light-dark(#bde3ff, #667799);
30
- --figma-color-bg-pressed: light-dark(#f5f5f5, #383838);
31
- --figma-color-bg-secondary: light-dark(#f5f5f5, #383838);
32
- --figma-color-bg-selected: light-dark(#e5f4ff, #4a5878);
33
- --figma-color-bg-selected-hover: light-dark(#bde3ff, #536383);
34
- --figma-color-bg-selected-pressed: light-dark(#bde3ff, #536383);
35
- --figma-color-bg-selected-secondary: light-dark(#f2f9ff, #394360);
36
- --figma-color-bg-selected-strong: light-dark(#0d99ff, #0c8ce9);
37
- --figma-color-bg-selected-tertiary: light-dark(#f2f9ff, #394360);
38
- --figma-color-bg-success: light-dark(#14ae5c, #198f51);
39
- --figma-color-bg-success-hover: light-dark(#009951, #078348);
40
- --figma-color-bg-success-pressed: light-dark(#009951, #078348);
41
- --figma-color-bg-success-secondary: light-dark(#008043, #0a5c35);
42
- --figma-color-bg-success-tertiary: light-dark(#cff7d3, #476656);
43
- --figma-color-bg-tertiary: light-dark(#e6e6e6, #444444);
44
- --figma-color-bg-warning: light-dark(#ffcd29, #f3c11b);
45
- --figma-color-bg-warning-hover: light-dark(#ffc21a, #f2b50d);
46
- --figma-color-bg-warning-pressed: light-dark(#ffc21a, #f2b50d);
47
- --figma-color-bg-warning-secondary: light-dark(#fab815, #e4a711);
48
- --figma-color-bg-warning-tertiary: light-dark(#fff1c2, #5c4100);
49
- --figma-color-bg-switch: light-dark(#e6e6e6, #444444);
50
-
51
- /* Border Colors */
52
- --figma-color-border: light-dark(#e6e6e6, #444444);
53
- --figma-color-border-brand: light-dark(#bde3ff, #105cad);
54
- --figma-color-border-brand-strong: light-dark(#007be5, #7cc4f8);
55
- --figma-color-border-component: light-dark(#e4ccff, #652ca8);
56
- --figma-color-border-component-hover: light-dark(#9747ff, #8a38f5);
57
- --figma-color-border-component-strong: light-dark(#8638e5, #d6b6fb);
58
- --figma-color-border-danger: light-dark(#ffc7c2, #963323);
59
- --figma-color-border-danger-strong: light-dark(#dc3412, #fca397);
60
- --figma-color-border-disabled: light-dark(#e6e6e6, #444444);
61
- --figma-color-border-disabled-strong: light-dark(#0000004d, #ffffff66);
62
- --figma-color-border-menu: #383838;
63
- --figma-color-border-onbrand: light-dark(#007be5, #0a6dc2);
64
- --figma-color-border-onbrand-strong: #ffffff;
65
- --figma-color-border-oncomponent: light-dark(#8638e5, #7a2ed6);
66
- --figma-color-border-oncomponent-strong: #ffffff;
67
- --figma-color-border-ondanger: light-dark(#dc3412, #c4381c);
68
- --figma-color-border-ondanger-strong: #ffffff;
69
- --figma-color-border-onselected: light-dark(#bde3ff, #667799);
70
- --figma-color-border-onselected-strong: light-dark(#000000e5, #ffffffe5);
71
- --figma-color-border-onsuccess: light-dark(#009951, #078348);
72
- --figma-color-border-onsuccess-strong: #ffffff;
73
- --figma-color-border-onwarning: light-dark(#fab815, #e4a711);
74
- --figma-color-border-onwarning-strong: #000000e5;
75
- --figma-color-border-selected: light-dark(#0d99ff, #0c8ce9);
76
- --figma-color-border-selected-strong: light-dark(#007be5, #7cc4f8);
77
- --figma-color-border-strong: light-dark(#2c2c2c, #ffffffe5);
78
- --figma-color-border-success: light-dark(#aff4c6, #0a5c35);
79
- --figma-color-border-success-strong: light-dark(#009951, #79d297);
80
- --figma-color-border-warning: light-dark(#ffe8a3, #925711);
81
- --figma-color-border-warning-strong: light-dark(#b86200, #f7d15f);
82
-
83
- /* Icon Colors */
84
- --figma-color-icon: light-dark(#000000e5, #ffffff);
85
- --figma-color-icon-brand: light-dark(#007be5, #7cc4f8);
86
- --figma-color-icon-brand-pressed: light-dark(#0768cf, #0c8ce9);
87
- --figma-color-icon-brand-secondary: light-dark(#80caff, #0a6dc2);
88
- --figma-color-icon-brand-tertiary: light-dark(#bde3ff, #394360);
89
- --figma-color-icon-component: light-dark(#8638e5, #d1a8ff);
90
- --figma-color-icon-component-pressed: light-dark(#7c2bda, #d6b6fb);
91
- --figma-color-icon-component-secondary: light-dark(#c5b2dc, #7f699b);
92
- --figma-color-icon-component-tertiary: light-dark(#c5b2dc, #7f699b);
93
- --figma-color-icon-danger: light-dark(#f24822, #e03e1a);
94
- --figma-color-icon-danger-hover: light-dark(#bd2915, #fbbcb6);
95
- --figma-color-icon-danger-pressed: light-dark(#bd2915, #fbbcb6);
96
- --figma-color-icon-danger-secondary: light-dark(#f24822, #e03e1a);
97
- --figma-color-icon-danger-secondary-hover: light-dark(#f24822, #e03e1a);
98
- --figma-color-icon-danger-tertiary: light-dark(#f24822, #e03e1a);
99
- --figma-color-icon-disabled: light-dark(#0000004d, #ffffff66);
100
- --figma-color-icon-hover: light-dark(#000000e5, #ffffff);
101
- --figma-color-icon-onbrand: #ffffff;
102
- --figma-color-icon-onbrand-secondary: #ffffffcc;
103
- --figma-color-icon-onbrand-tertiary: #ffffff66;
104
- --figma-color-icon-oncomponent: #ffffff;
105
- --figma-color-icon-oncomponent-secondary: #ffffffcc;
106
- --figma-color-icon-oncomponent-tertiary: #ffffff66;
107
- --figma-color-icon-ondanger: #ffffff;
108
- --figma-color-icon-ondanger-secondary: #ffffffcc;
109
- --figma-color-icon-ondanger-tertiary: #ffffff66;
110
- --figma-color-icon-ondisabled: light-dark(#ffffff, #2c2c2c);
111
- --figma-color-icon-oninverse: light-dark(#ffffffe5, #000000e5);
112
- --figma-color-icon-onselected: light-dark(#000000e5, #ffffff);
113
- --figma-color-icon-onselected-secondary: light-dark(#00000080, #ffffffb2);
114
- --figma-color-icon-onselected-strong: #ffffff;
115
- --figma-color-icon-onselected-tertiary: light-dark(#0000004d, #ffffff66);
116
- --figma-color-icon-onsuccess: #ffffff;
117
- --figma-color-icon-onsuccess-secondary: #ffffffcc;
118
- --figma-color-icon-onsuccess-tertiary: #ffffff66;
119
- --figma-color-icon-onwarning: #000000e5;
120
- --figma-color-icon-onwarning-secondary: #00000080;
121
- --figma-color-icon-onwarning-tertiary: #0000004d;
122
- --figma-color-icon-pressed: light-dark(#007be5, #0a6dc2);
123
- --figma-color-icon-secondary: light-dark(#00000080, #ffffffb2);
124
- --figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
125
- --figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
126
- --figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
127
- --figma-color-icon-selected-tertiary: light-dark(#007be5, #7cc4f8);
128
- --figma-color-icon-success: light-dark(#14ae5c, #198f51);
129
- --figma-color-icon-success-pressed: light-dark(#008043, #a1e8b9);
130
- --figma-color-icon-success-secondary: light-dark(#14ae5c, #198f51);
131
- --figma-color-icon-success-tertiary: light-dark(#14ae5c, #198f51);
132
- --figma-color-icon-tertiary: light-dark(#0000004d, #ffffff66);
133
- --figma-color-icon-tertiary-hover: light-dark(#000000e5, #ffffff);
134
- --figma-color-icon-warning: light-dark(#ffcd29, #f3c11b);
135
- --figma-color-icon-warning-pressed: light-dark(#b86200, #f7d15f);
136
- --figma-color-icon-warning-secondary: light-dark(#ffcd29, #f3c11b);
137
- --figma-color-icon-warning-tertiary: light-dark(#ffcd29, #f3c11b);
138
-
139
- /* Text Colors */
140
- --figma-color-text: light-dark(#000000e5, #ffffff);
141
- --figma-color-text-brand: light-dark(#007be5, #7cc4f8);
142
- --figma-color-text-brand-secondary: light-dark(#007be5, #7cc4f8);
143
- --figma-color-text-brand-tertiary: light-dark(#007be5, #7cc4f8);
144
- --figma-color-text-component: light-dark(#8638e5, #d1a8ff);
145
- --figma-color-text-component-pressed: light-dark(#7c2bda, #d6b6fb);
146
- --figma-color-text-component-secondary: light-dark(#c5b2dc, #7f699b);
147
- --figma-color-text-component-tertiary: light-dark(#c5b2dc, #7f699b);
148
- --figma-color-text-danger: light-dark(#dc3412, #fca397);
149
- --figma-color-text-danger-secondary: light-dark(#dc3412, #fca397);
150
- --figma-color-text-danger-tertiary: light-dark(#dc3412, #fca397);
151
- --figma-color-text-disabled: light-dark(#0000004d, #ffffff66);
152
- --figma-color-text-hover: light-dark(#000000e5, #ffffff);
153
- --figma-color-text-onbrand: #ffffff;
154
- --figma-color-text-onbrand-secondary: #ffffffcc;
155
- --figma-color-text-onbrand-tertiary: #ffffff66;
156
- --figma-color-text-oncomponent: #ffffff;
157
- --figma-color-text-oncomponent-secondary: #ffffffcc;
158
- --figma-color-text-oncomponent-tertiary: #ffffff66;
159
- --figma-color-text-ondanger: #ffffff;
160
- --figma-color-text-ondanger-secondary: #ffffffcc;
161
- --figma-color-text-ondanger-tertiary: #ffffff66;
162
- --figma-color-text-ondisabled: light-dark(#ffffff, #2c2c2c);
163
- --figma-color-text-oninverse: light-dark(#ffffffe5, #000000e5);
164
- --figma-color-text-onselected: light-dark(#000000e5, #ffffffe5);
165
- --figma-color-text-onselected-secondary: light-dark(#00000080, #ffffffb2);
166
- --figma-color-text-onselected-strong: #ffffff;
167
- --figma-color-text-onselected-tertiary: light-dark(#0000004d, #ffffff66);
168
- --figma-color-text-onsuccess: #ffffff;
169
- --figma-color-text-onsuccess-secondary: #ffffffcc;
170
- --figma-color-text-onsuccess-tertiary: #ffffff66;
171
- --figma-color-text-onwarning: #000000e5;
172
- --figma-color-text-onwarning-secondary: #00000080;
173
- --figma-color-text-onwarning-tertiary: #0000004d;
174
- --figma-color-text-secondary: light-dark(#00000080, #ffffffb2);
175
- --figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
176
- --figma-color-text-selection: rgba(13, 153, 255, 0.4);
177
- --figma-color-text-selected: light-dark(#007be5, #7cc4f8);
178
- --figma-color-text-selected-secondary: light-dark(#007be5, #7cc4f8);
179
- --figma-color-text-selected-tertiary: light-dark(#007be5, #7cc4f8);
180
- --figma-color-text-success: light-dark(#009951, #79d297);
181
- --figma-color-text-success-secondary: light-dark(#009951, #79d297);
182
- --figma-color-text-success-tertiary: light-dark(#009951, #79d297);
183
- --figma-color-text-tertiary: light-dark(#0000004d, #ffffff66);
184
- --figma-color-text-tertiary-hover: light-dark(#000000e5, #ffffff);
185
- --figma-color-text-warning: light-dark(#b86200, #f7d15f);
186
- --figma-color-text-warning-secondary: light-dark(#b86200, #f7d15f);
187
- --figma-color-text-warning-tertiary: light-dark(#b86200, #f7d15f);
188
- --figma-color-text-menu: #ffffff;
189
- --figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
190
- --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
191
- }
192
-
193
- :root {
194
- /* Typography & Sizing */
195
- --font-size: 16px;
196
- --font-family:
197
- "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir,
198
- segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
199
- sans-serif;
200
- --body-medium-fontSize: 0.6875rem;
201
- --body-large-fontSize: 0.8125rem;
202
- --body-letter-spacing: 0.055px;
203
- --body-medium-strong-fontWeight: 550;
204
- --body-large-strong-fontWeight: 500;
205
- --body-medium-fontWeight: 450;
206
-
207
- /* Spacing */
208
- --spacer-1: 0.25rem;
209
- --spacer-2: 0.5rem;
210
- --spacer-2-5: 0.75rem;
211
- --spacer-3: 1rem;
212
- --spacer-4: 1.5rem;
213
- --spacer-5: 2rem;
214
- --spacer-6: 2.5rem;
215
-
216
- /* Radii */
217
- --radius-none: 0;
218
- --radius-small: 0.125rem;
219
- --radius-medium: 0.3125rem;
220
- --radius-large: 0.8125rem;
221
- --figma-radius-none: var(--radius-none);
222
- --figma-radius-small: var(--radius-small);
223
- --figma-radius-medium: var(--radius-medium);
224
- --figma-radius-large: var(--radius-large);
225
-
226
- /* Transitions */
227
- --input-transition: all 0.08s ease-out;
228
-
229
- /* Misc UI */
230
- --popover-min-width: 15rem;
231
- --handle-color: #fff;
232
- --bg-selected: #f5f5f5;
233
- --bg-selected-active: #e5f4ff;
234
- --bg-tooltip: #1e1e1e;
235
- --color-tooltip: #ffffff;
236
-
237
- /* Transparent Backgrounds - use light-dark() */
238
- --figma-color-bordertranslucent: light-dark(
239
- rgba(0, 0, 0, 0.1),
240
- rgba(255, 255, 255, 0.1)
241
- );
242
- --figma-color-bg-transparent: light-dark(
243
- rgba(0, 0, 0, 0.05),
244
- rgba(255, 255, 255, 0.05)
245
- );
246
- --figma-color-bg-transparent-hover: light-dark(
247
- rgba(0, 0, 0, 0.05),
248
- rgba(255, 255, 255, 0.05)
249
- );
250
- --figma-color-bg-transparent-pressed: light-dark(
251
- rgba(0, 0, 0, 0.1),
252
- rgba(255, 255, 255, 0.1)
253
- );
254
- --figma-color-bg-transparent-secondary: light-dark(
255
- rgba(0, 0, 0, 0.2),
256
- rgba(255, 255, 255, 0.2)
257
- );
258
-
259
- /* Gradients */
260
- --checkerboard: repeating-conic-gradient(
261
- rgba(0, 0, 0, 0.1) 0% 25%,
262
- rgba(255, 255, 255, 0.1) 0% 50%
263
- )
264
- 0 0 / 0.66666rem 0.66666rem;
265
- --bg-hue: linear-gradient(
266
- 90deg,
267
- rgba(255, 0, 0, 1),
268
- rgba(255, 48, 0, 1),
269
- rgba(255, 96, 0, 1),
270
- rgba(255, 143, 0, 1),
271
- rgba(255, 191, 0, 1),
272
- rgba(255, 239, 0, 1),
273
- rgba(223, 255, 0, 1),
274
- rgba(175, 255, 0, 1),
275
- rgba(128, 255, 0, 1),
276
- rgba(80, 255, 0, 1),
277
- rgba(32, 255, 0, 1),
278
- rgba(0, 255, 16, 1),
279
- rgba(0, 255, 64, 1),
280
- rgba(0, 255, 112, 1),
281
- rgba(0, 255, 159, 1),
282
- rgba(0, 255, 207, 1),
283
- rgba(0, 255, 255, 1),
284
- rgba(0, 207, 255, 1),
285
- rgba(0, 159, 255, 1),
286
- rgba(0, 112, 255, 1),
287
- rgba(0, 64, 255, 1),
288
- rgba(0, 16, 255, 1),
289
- rgba(32, 0, 255, 1),
290
- rgba(80, 0, 255, 1),
291
- rgba(127, 0, 255, 1),
292
- rgba(175, 0, 255, 1),
293
- rgba(223, 0, 255, 1),
294
- rgba(255, 0, 239, 1),
295
- rgba(255, 0, 191, 1),
296
- rgba(255, 0, 143, 1),
297
- rgba(255, 0, 96, 1),
298
- rgba(255, 0, 48, 1)
299
- );
300
-
301
- /* Icons - colorless shapes for use with mask-image */
302
- --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");
303
- --icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
304
- --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
305
- --icon-eyedropper: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
306
- --icon-add: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");
307
- --icon-minus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");
308
- --icon-back: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");
309
- --icon-arrow-left: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
310
- --icon-forward: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
311
- --icon-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
312
- --icon-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
313
- --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
314
-
315
- /* Elevations — light-dark() handles theme switching inline */
316
- --figma-elevation-100:
317
- 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
318
- inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1)),
319
- 0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
320
-
321
- --figma-elevation-200:
322
- 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.18), transparent),
323
- 0px 3px 8px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)),
324
- 0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
325
- inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
326
- inset 0px 0px 0.5px 0px light-dark(transparent, rgba(255, 255, 255, 0.3));
327
-
328
- --elevation-100-canvas:
329
- 0 0 0.5px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
330
- 0 0.5px 0 0 light-dark(transparent, rgba(255, 255, 255, 0.1)) inset,
331
- 0 0 0.5px 0 light-dark(transparent, rgba(255, 255, 255, 0.3)) inset,
332
- 0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
333
-
334
- --figma-elevation-400-menu-panel:
335
- 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.12), transparent),
336
- 0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
337
- 0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
338
- inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
339
- inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
340
-
341
- --figma-elevation-500-modal-window:
342
- 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
343
- 0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
344
- 0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), transparent),
345
- 0px 3px 5px 0px light-dark(transparent, rgba(0, 0, 0, 0.35)),
346
- inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
347
-
348
- --handle-shadow:
349
- 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
350
- 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
351
- 0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
352
- }
353
-
354
- button,
355
- select,
356
- input,
357
- fieldset {
358
- display: inline-flex;
359
- align-items: center;
360
- margin: 0;
361
- gap: 0.25rem;
362
- font: inherit;
363
- line-height: 1rem;
364
- }
365
-
366
- textarea,
367
- input[type="text"],
368
- input[type="number"],
369
- input[type="password"],
370
- .input {
371
- background-color: var(--figma-color-bg-secondary);
372
- border: 0;
373
- border-radius: var(--radius-medium);
374
- padding: var(--spacer-1) var(--spacer-2);
375
- line-height: 1rem !important;
376
- box-sizing: content-box;
377
- resize: none;
378
- min-width: 0;
379
- font: inherit;
380
- display: flex;
381
- color: inherit;
382
- appearance: textfield;
383
- -moz-appearance: textfield;
384
-
385
- &:focus {
386
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
387
- outline: 0;
388
- }
389
- &::-webkit-outer-spin-button,
390
- &::-webkit-inner-spin-button {
391
- display: none;
392
- color-scheme: inherit;
393
- -webkit-appearance: none;
394
- margin: 0;
395
- }
396
- }
397
-
398
- fig-input-text,
399
- fig-input-number {
400
- &:has([slot="append"]) input[type="number"] {
401
- &::-webkit-outer-spin-button,
402
- &::-webkit-inner-spin-button {
403
- display: none;
404
- color-scheme: inherit;
405
- margin: 0;
406
- opacity: 0;
407
- }
408
- }
409
- &[steppers="true"] {
410
- input[type="number"]::-webkit-inner-spin-button {
411
- display: block;
412
- opacity: 1;
413
- height: 1.5rem;
414
- width: 1.5rem;
415
- margin-right: calc(var(--spacer-2) * -1);
416
- background-color: var(--figma-color-text-secondary);
417
- mask-image: var(--icon-steppers);
418
- }
419
- }
420
- }
421
-
422
- /* Textarea */
423
- textarea {
424
- min-height: 2rem;
425
- display: block;
426
- width: 100%;
427
- box-sizing: border-box;
428
- }
429
-
430
- /* Dropdown */
431
- select,
432
- input[type="text"][list] {
433
- height: var(--spacer-4);
434
- padding: 0 calc(var(--spacer-2) - 1px);
435
- border-radius: var(--radius-medium);
436
- display: flex;
437
- appearance: none;
438
- align-items: center;
439
- flex: 1 0 0;
440
- border: 0;
441
- color: var(--figma-color-text);
442
- background-color: var(--figma-color-bg);
443
- box-shadow: inset 0 0 0 1px var(--figma-color-border);
444
- accent-color: var(--figma-color-bg-brand);
445
- overflow: hidden;
446
- white-space: nowrap;
447
- text-overflow: ellipsis;
448
-
449
- &:focus {
450
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
451
- outline: 0;
452
- }
453
-
454
- &::-webkit-calendar-picker-indicator {
455
- color-scheme: inherit;
456
- opacity: 0;
457
- }
458
- }
459
-
460
- @supports (appearance: base-select) {
461
- fig-dropdown[experimental~="modern"] {
462
- &[type="dropdown"] {
463
- select:before {
464
- content: attr(aria-label);
465
- }
466
- option::checkmark {
467
- display: none;
468
- }
469
- option {
470
- padding-left: var(--spacer-3);
471
- }
472
- }
473
- select {
474
- --option-height: 1.5rem;
475
- --max-width: 20rem;
476
- @media (hover) and (pointer: fine) {
477
- &,
478
- &::picker(select) {
479
- appearance: base-select;
480
- }
481
- }
482
-
483
- padding-block: 0;
484
- will-change: scale;
485
-
486
- @supports (-webkit-touch-callout: none) {
487
- font-size: 16px;
488
- }
489
-
490
- option::checkmark {
491
- content: "";
492
- display: block;
493
- width: 1rem;
494
- height: 1rem;
495
- background-color: currentColor;
496
- -webkit-mask-image: var(--icon-checkmark);
497
- mask-image: var(--icon-checkmark);
498
- -webkit-mask-repeat: no-repeat;
499
- mask-repeat: no-repeat;
500
- -webkit-mask-position: center;
501
- mask-position: center;
502
- -webkit-mask-size: contain;
503
- mask-size: contain;
504
- }
505
-
506
- option {
507
- display: flex;
508
- gap: var(--spacer-1);
509
- padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
510
- font-weight: var(--body-medium-fontWeight);
511
- color: var(--figma-color-text-menu);
512
- position: relative;
513
- & * {
514
- color: inherit;
515
- }
516
- &[hidden] {
517
- display: none;
518
- }
519
- &:before {
520
- content: "";
521
- display: block;
522
- position: absolute;
523
- inset: 0 var(--spacer-2);
524
- border-radius: var(--radius-medium);
525
- z-index: -1;
526
- }
527
- &:checked:before {
528
- background-color: transparent;
529
- }
530
- &:not(:checked):before {
531
- background-color: transparent;
532
- }
533
- &:not(:disabled) {
534
- &:hover,
535
- &:active,
536
- &:focus-visible {
537
- background-color: transparent;
538
- outline: 0;
539
- &:before {
540
- background-color: var(--figma-color-bg-menu-hover);
541
- }
542
- }
543
- }
544
- }
545
-
546
- optgroup {
547
- color: var(--figma-color-text-menu-secondary);
548
- text-align: left;
549
- position: relative;
550
- padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
551
- font-weight: var(--body-medium-fontWeight);
552
- &[label]:not([label=""]) {
553
- padding-top: var(--spacer-2);
554
- option:first-child {
555
- margin-top: var(--spacer-2);
556
- }
557
- }
558
- legend {
559
- padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
560
- }
561
- option {
562
- margin: 0 calc(var(--spacer-1) * -1);
563
- margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
564
- }
565
- &:not(:first-child) {
566
- margin-top: var(--spacer-2);
567
- padding-top: var(--spacer-3);
568
-
569
- &:before {
570
- content: "";
571
- display: block;
572
- position: absolute;
573
- left: 0;
574
- right: 0;
575
- top: 1px;
576
- height: 1px;
577
- background-color: var(--figma-color-border-menu);
578
- margin-bottom: var(--spacer-2);
579
- }
580
- }
581
- }
582
- option[hidden="true"]:first-child + optgroup {
583
- margin-top: 0;
584
- padding-top: var(--spacer-2);
585
- &:before {
586
- display: none;
587
- }
588
- }
589
-
590
- /* Customizable select button content (closed state) */
591
- &:has(> button) {
592
- padding-left: 0;
593
- }
594
- & > button {
595
- display: flex;
596
- align-items: center;
597
- gap: var(--spacer-1);
598
- width: 100%;
599
- border: 0;
600
- background: transparent;
601
- padding: 0;
602
- margin: 0;
603
- color: inherit;
604
- font: inherit;
605
- height: 100%;
606
- white-space: nowrap;
607
- text-overflow: ellipsis;
608
- overflow: hidden;
609
-
610
- & > selectedcontent {
611
- display: flex;
612
- align-items: center;
613
- gap: 0;
614
- min-width: 0;
615
- &:not(:has(> svg)) {
616
- padding-left: var(--spacer-2);
617
- }
618
-
619
- & svg {
620
- flex-shrink: 0;
621
- }
622
- }
623
- }
624
- }
625
- ::picker-icon {
626
- display: none;
627
- }
628
-
629
- ::picker(select) {
630
- appearance: base-select;
631
- color-scheme: dark;
632
-
633
- /* Appearance/style */
634
- scrollbar-width: thin;
635
- outline: 0;
636
- scrollbar-color: var(--figma-color-text-menu-tertiary)
637
- var(--figma-color-bg-menu);
638
- border-radius: var(--radius-large);
639
- border: 0;
640
- background-color: var(--figma-color-bg-menu);
641
- padding: var(--spacer-2) 0;
642
- box-shadow: var(--figma-elevation-400-menu-panel);
643
- }
644
- }
645
- }
646
-
647
- input[type="text"][list],
648
- select {
649
- padding-right: var(--spacer-4);
650
- padding-left: var(--spacer-2);
651
- }
652
-
653
- /* Dropdown */
654
- fig-dropdown,
655
- .fig-dropdown {
656
- display: inline-flex;
657
- position: relative;
658
-
659
- & > *:not(select) {
660
- display: none !important;
661
- }
662
- > select {
663
- display: flex;
664
- align-items: center;
665
- flex: 1;
666
- width: 100%;
667
- }
668
-
669
- /* Chevron icon using mask-image for light-dark support */
670
- &::after {
671
- content: "";
672
- position: absolute;
673
- right: 0.25rem;
674
- top: 50%;
675
- transform: translateY(-50%);
676
- width: 1rem;
677
- height: 1rem;
678
- mask-image: var(--icon-chevron);
679
- mask-size: contain;
680
- mask-repeat: no-repeat;
681
- mask-position: center;
682
- background-color: var(--figma-color-icon);
683
- pointer-events: none;
684
- }
685
-
686
- /* Autoresize to content width */
687
- &[autoresize] select {
688
- field-sizing: content;
689
- }
690
- }
691
-
692
- /* Button */
693
- .fig-button,
694
- fig-button {
695
- color: var(--figma-color-text-onbrand);
696
- display: flex;
697
- align-items: center;
698
- justify-content: center;
699
- height: var(--spacer-4);
700
- padding: 0 var(--spacer-2);
701
- appearance: none;
702
- border: 0;
703
- min-width: 0;
704
- color: var(--figma-color-text-onbrand);
705
- outline: 0;
706
- border-radius: var(--radius-medium);
707
- background-color: var(--figma-color-bg-brand);
708
- font-weight: 500;
709
-
710
- &:active {
711
- background-color: var(--figma-color-bg-brand-pressed);
712
- }
713
-
714
- &:hover {
715
- background-color: var(--figma-color-bg-brand-hover);
716
- &:active {
717
- background-color: var(--figma-color-bg-brand-pressed);
718
- }
719
- &:active {
720
- background-color: var(--figma-color-bg-brand-pressed);
721
- color: var(--figma-color-text-onbrand-secondary);
722
- }
723
- }
724
-
725
- /* Variant: Link */
726
- &[variant="link"] {
727
- box-shadow: none;
728
- background: none;
729
- color: var(--figma-color-text-brand);
730
-
731
- &:hover:not(:active) {
732
- background-color: transparent;
733
- }
734
-
735
- &:active {
736
- outline: 0;
737
- background-color: var(--figma-color-bg-selected);
738
- color: var(--figma-color-text-brand);
739
- }
740
- }
741
- /* Variant: Ghost */
742
- &[variant="ghost"] {
743
- box-shadow: none;
744
- background: none;
745
- color: var(--figma-color-text);
746
-
747
- &:hover:not(:active) {
748
- background-color: var(--figma-color-bg-transparent-hover);
749
- }
750
-
751
- &:active {
752
- outline: 0;
753
- background-color: var(--figma-color-bg-transparent-pressed);
754
- color: var(--figma-color-text);
755
- }
756
- }
757
-
758
- &[variant="ghost"][disabled]:not([disabled="false"]) {
759
- background-color: transparent;
760
- }
761
- /* Variant: Secondary */
762
- &[variant="secondary"] {
763
- box-shadow: inset 0 0 0 1px var(--figma-color-border);
764
- padding: 0 calc(var(--spacer-2) - 1px);
765
- background: none;
766
- color: var(--figma-color-text);
767
-
768
- &:active {
769
- background-color: var(--figma-color-bg-secondary);
770
- color: var(--figma-color-text);
771
- }
772
- }
773
-
774
- /* Variant: Input */
775
- &[variant="input"] {
776
- background-color: var(--figma-color-bg-secondary);
777
- box-shadow: none;
778
- color: var(--figma-color-text);
779
-
780
- &:hover {
781
- box-shadow: inset 0 0 0 1px var(--figma-color-border);
782
- background-color: var(--figma-color-bg-transparent);
783
- }
784
-
785
- &:active {
786
- background-color: var(--figma-color-bg-secondary);
787
- color: var(--figma-color-text);
788
- }
789
-
790
- &:focus-visible {
791
- background-color: var(--figma-color-bg-secondary);
792
- }
793
- }
794
-
795
- /* Variant: Overlay (for on top of content) */
796
- &[variant="overlay"] {
797
- color-scheme: light;
798
- background-color: var(--figma-color-bg);
799
- color: var(--figma-color-text);
800
- box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);
801
-
802
- &:active,
803
- &:has(:active) {
804
- background-color: var(--figma-color-bg-secondary);
805
- color: var(--figma-color-text);
806
- }
807
- }
808
-
809
- /* Icon only */
810
- &[icon] {
811
- width: var(--spacer-4);
812
- padding: 0;
813
- flex-grow: 0;
814
- flex-shrink: 0;
815
- flex-basis: var(--spacer-4);
816
- &[size="compact"] {
817
- width: var(--spacer-3);
818
- flex-basis: var(--spacer-3);
819
- }
820
- }
821
-
822
- /* Disabled */
823
- &[disabled]:not([disabled="false"]) {
824
- background-color: var(--figma-color-bg-disabled);
825
- pointer-events: none;
826
- cursor: not-allowed;
827
- &:not([variant="secondary"]) {
828
- color: var(--figma-color-text-ondisabled);
829
- box-shadow: none;
830
- }
831
- &[variant="secondary"],
832
- &[variant="ghost"] {
833
- color: var(--figma-color-text-disabled);
834
- background-color: transparent;
835
- }
836
- }
837
-
838
- /* Size */
839
- &[size="large"],
840
- &[size="large"] > button {
841
- height: var(--spacer-5);
842
- padding: 0 var(--spacer-3);
843
- }
844
-
845
- &[size="large"][icon],
846
- &[size="large"][icon] > button {
847
- width: var(--spacer-5);
848
- flex-basis: var(--spacer-5);
849
- padding: 0;
850
- }
851
-
852
- /* Full width */
853
- &[full] {
854
- width: 100%;
855
- }
856
-
857
- /* Block button */
858
- &[inline="false"],
859
- &[inline="false"] > button {
860
- display: flex;
861
- width: 100%;
862
- justify-content: left;
863
- height: auto;
864
- text-align: left;
865
- align-items: center;
866
- padding: var(--spacer-1) var(--spacer-2);
867
- }
868
-
869
- &[type="select"],
870
- &[type="upload"] {
871
- position: relative;
872
- overflow: hidden;
873
- > select,
874
- > input,
875
- > fig-dropdown {
876
- position: absolute;
877
- inset: 0;
878
- opacity: 0;
879
- appearance: none;
880
- }
881
- }
882
-
883
- &[inline="false"] {
884
- padding: 0;
885
- }
886
-
887
- &[selected]:not([selected="false"]) {
888
- &,
889
- &:hover {
890
- color: var(--figma-color-icon-brand);
891
- background-color: var(--figma-color-bg-selected);
892
- }
893
- }
894
-
895
- &:focus-visible,
896
- &[data-focus-visible] {
897
- outline: 0;
898
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
899
- }
900
- svg {
901
- *[fill] {
902
- fill: currentColor;
903
- }
904
- *[stroke]:not([stroke="none"]) {
905
- stroke: currentColor;
906
- }
907
- }
908
- &:has(svg:first-child):not([icon]) {
909
- padding-left: var(--spacer-1);
910
- }
911
- }
912
-
913
- /* Combo button */
914
- .fig-button-combo,
915
- fig-button-combo,
916
- .fig-input-combo,
917
- fig-input-combo {
918
- display: inline-flex;
919
- flex-wrap: nowrap;
920
- align-items: center;
921
- gap: 0px;
922
- & > * {
923
- &:first-child,
924
- &:first-child > * {
925
- border-top-right-radius: 0;
926
- border-bottom-right-radius: 0;
927
- }
928
-
929
- &:last-child,
930
- &:last-child > * {
931
- border-top-left-radius: 0;
932
- border-bottom-left-radius: 0;
933
- }
934
-
935
- &:not(:last-child):not(:first-child),
936
- &:not(:last-child):not(:first-child) > * {
937
- border-radius: 0;
938
- }
939
- }
940
- }
941
- .fig-input-combo,
942
- fig-input-combo {
943
- gap: 1px;
944
- }
945
- .fig-button-combo,
946
- fig-button-combo {
947
- > *:not([variant="secondary"]):not(:first-child) {
948
- box-shadow: inset 1px 0 0 0 var(--figma-color-bg-brand-hover);
949
- &[disabled]:not([disabled="false"]) {
950
- box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
951
- }
952
- }
953
- > *[variant="secondary"]:not(:first-child) {
954
- border-left-width: 0 !important;
955
- &[disabled]:not([disabled="false"]) {
956
- border-left-width: 0 !important;
957
- }
958
- }
959
- }
960
-
961
- /* Tabs */
962
- fig-tab,
963
- .fig-tab {
964
- display: inline-flex;
965
- flex-direction: column;
966
- align-items: center;
967
- justify-content: center;
968
- height: 1.5rem;
969
- padding: 0 var(--spacer-2);
970
- appearance: none;
971
- border: 0;
972
- cursor: default;
973
- gap: 0 !important;
974
- user-select: none;
975
- border-radius: var(--radius-medium);
976
- color: var(--figma-color-text-secondary);
977
- position: relative;
978
-
979
- &[label] {
980
- &::after {
981
- content: attr(label);
982
- color: var(--figma-color-text-secondary);
983
- content: attr(label);
984
- height: 0 !important;
985
- width: auto !important;
986
- visibility: hidden;
987
- overflow: hidden;
988
- user-select: none;
989
- pointer-events: none;
990
- font-weight: var(--body-medium-strong-fontWeight);
991
- }
992
- }
993
-
994
- &:has(:checked),
995
- &[selected]:not([selected="false"]) {
996
- background-color: var(--figma-color-bg-secondary);
997
- font-weight: var(--body-medium-strong-fontWeight);
998
- color: var(--figma-color-text);
999
- }
1000
-
1001
- &:hover {
1002
- background-color: var(--figma-color-bg-secondary);
1003
- }
1004
-
1005
- & [type="radio"] {
1006
- position: absolute;
1007
- inset: 0;
1008
- border-radius: 0;
1009
- opacity: 0;
1010
- z-index: 1;
1011
- width: 100%;
1012
- height: 100%;
1013
- }
1014
- }
1015
-
1016
- fig-tabs,
1017
- .tabs {
1018
- display: flex;
1019
- gap: var(--spacer-2);
1020
- }
1021
-
1022
- fig-tab-content,
1023
- .fig-tab-content {
1024
- display: none;
1025
- }
1026
-
1027
- /* Avatar */
1028
- fig-avatar,
1029
- .fig-avatar {
1030
- --size: 1.5rem;
1031
- width: var(--size);
1032
- display: inline-grid;
1033
- place-items: center;
1034
- height: var(--size);
1035
- border-radius: 100%;
1036
- border: 0;
1037
- background: var(--figma-color-bg-brand);
1038
- overflow: hidden;
1039
- color: var(--figma-color-icon-onbrand);
1040
-
1041
- img {
1042
- width: var(--size);
1043
- height: var(--size);
1044
- position: absolute;
1045
- border-radius: 100%;
1046
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1047
- &:not([src]) {
1048
- background: var(--checkerboard);
1049
- }
1050
- }
1051
- &[borderless] img {
1052
- box-shadow: none;
1053
- }
1054
-
1055
- &:has(img[src]) {
1056
- background: none;
1057
- }
1058
- &::after {
1059
- content: attr(initials);
1060
- }
1061
- &[size="large"] {
1062
- --size: 3rem;
1063
- }
1064
- }
1065
-
1066
- /* Color input */
1067
- input[type="color"] {
1068
- width: 0.875rem;
1069
- height: 0.875rem;
1070
- -webkit-appearance: none;
1071
- appearance: none;
1072
- border: 0;
1073
- padding: 0;
1074
- margin: 0;
1075
- background: none;
1076
- padding: 0.3125rem;
1077
- flex-shrink: 0;
1078
- box-sizing: content-box;
1079
- border-radius: var(--radius-medium);
1080
- background-color: var(--figma-color-bg-secondary);
1081
- display: inline-grid;
1082
-
1083
- &:focus {
1084
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
1085
- outline: 0;
1086
- }
1087
-
1088
- &::-webkit-color-swatch-wrapper {
1089
- padding: 0;
1090
- border: 0;
1091
- color-scheme: inherit;
1092
- appearance: none;
1093
- border-radius: 0.125rem;
1094
- background: var(--checkerboard);
1095
- overflow: hidden;
1096
- grid-area: 1/1;
1097
- color-scheme: inherit;
1098
- outline: 0;
1099
- }
1100
-
1101
- &::-webkit-color-swatch {
1102
- padding: 0;
1103
- border: 0;
1104
- color-scheme: inherit;
1105
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1106
- color-scheme: inherit;
1107
- border-radius: 0.125rem;
1108
- mask-image: linear-gradient(
1109
- to right,
1110
- black 0%,
1111
- black 50%,
1112
- rgba(0, 0, 0, var(--alpha)) 50%
1113
- );
1114
- }
1115
- }
1116
-
1117
- input[type="color"] {
1118
- &::-moz-color-swatch {
1119
- color-scheme: inherit;
1120
- border-radius: 0.125rem;
1121
- color-scheme: inherit;
1122
- padding: 0;
1123
- border: 0;
1124
- appearance: none;
1125
- mask-image: linear-gradient(
1126
- to right,
1127
- black 0%,
1128
- black 50%,
1129
- rgba(0, 0, 0, var(--alpha)) 50%
1130
- );
1131
- border-radius: 0.125rem;
1132
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1133
- }
1134
- }
1135
-
1136
- fig-chit {
1137
- --size: 1.5rem;
1138
- --chit-background: #d9d9d9;
1139
- --chit-bg-size: cover;
1140
- --chit-bg-position: center;
1141
- --alpha: 1;
1142
-
1143
- display: inline-grid;
1144
- width: var(--size);
1145
- height: var(--size);
1146
- border-radius: var(--radius-medium);
1147
-
1148
- &::before,
1149
- &::after,
1150
- input {
1151
- grid-area: 1/1;
1152
- }
1153
-
1154
- /* Selection ring */
1155
- &[selected]:not([selected="false"])::before {
1156
- content: "";
1157
- width: var(--size);
1158
- height: var(--size);
1159
- z-index: 1;
1160
- border-radius: var(--radius-medium);
1161
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
1162
- }
1163
-
1164
- &[size="large"] {
1165
- --size: 1.75rem;
1166
-
1167
- /* Large size: swatch fills the whole area */
1168
- input[type="color"] {
1169
- padding: 0;
1170
- width: var(--size);
1171
- height: var(--size);
1172
- border-radius: var(--radius-medium);
1173
- }
1174
-
1175
- input[type="color"]::-webkit-color-swatch-wrapper {
1176
- border-radius: var(--radius-medium);
1177
- }
1178
-
1179
- input[type="color"]::-webkit-color-swatch {
1180
- border-radius: var(--radius-medium);
1181
- }
1182
-
1183
- input[type="color"]::-moz-color-swatch {
1184
- border-radius: var(--radius-medium);
1185
- }
1186
-
1187
- &[selected]:not([selected="false"])::before {
1188
- box-shadow:
1189
- inset 0 0 0 1px var(--figma-color-border-selected),
1190
- inset 0 0 0 3px var(--figma-color-bg);
1191
- }
1192
-
1193
- /* Large gradient/image: also fill the area */
1194
- &[data-type="gradient"]::after,
1195
- &[data-type="image"]::after {
1196
- width: var(--size);
1197
- height: var(--size);
1198
- border-radius: var(--radius-medium);
1199
- }
1200
- }
1201
-
1202
- &[disabled] {
1203
- pointer-events: none;
1204
- opacity: 0.5;
1205
- }
1206
-
1207
- /* Gradient/Image types - inset thumbnail with hidden input */
1208
- &[data-type="gradient"],
1209
- &[data-type="image"] {
1210
- background-color: var(--figma-color-bg-secondary);
1211
-
1212
- &::after {
1213
- content: "";
1214
- width: 0.875rem;
1215
- height: 0.875rem;
1216
- background: var(--chit-background);
1217
- background-size: var(--chit-bg-size);
1218
- background-position: var(--chit-bg-position);
1219
- background-repeat: no-repeat;
1220
- border-radius: 0.125rem;
1221
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1222
- mask-image: linear-gradient(
1223
- to right,
1224
- black 0%,
1225
- black 50%,
1226
- rgba(0, 0, 0, var(--alpha)) 50%
1227
- );
1228
- }
1229
-
1230
- &::after,
1231
- input {
1232
- grid-area: 1/1;
1233
- place-self: center;
1234
- }
1235
-
1236
- input[type="color"] {
1237
- opacity: 0;
1238
- }
1239
-
1240
- input[type="color"]::-webkit-color-swatch-wrapper {
1241
- background: none;
1242
- }
1243
-
1244
- input[type="color"]::-moz-color-swatch {
1245
- opacity: 0;
1246
- }
1247
-
1248
- input[type="color"]::-webkit-color-swatch {
1249
- opacity: 0;
1250
- }
1251
- }
1252
-
1253
- /* Checkerboard for empty/missing images */
1254
- &[data-type="image"]:not([background])::after,
1255
- &[data-type="image"][background=""]::after,
1256
- &[data-type="image"][background="url()"]::after {
1257
- background: var(--checkerboard);
1258
- }
1259
- }
1260
-
1261
- /* Fig Image */
1262
- fig-image {
1263
- --image-size: 2rem;
1264
- --fit: cover;
1265
- --image-width: var(--image-size);
1266
- --image-height: var(--image-size);
1267
- --aspect-ratio: 1 / 1;
1268
- display: inline-grid;
1269
- place-items: center;
1270
- width: var(--image-width);
1271
- height: var(--image-height);
1272
- aspect-ratio: var(--aspect-ratio);
1273
- > * {
1274
- grid-area: 1/1;
1275
- }
1276
- fig-chit {
1277
- --size: 100% !important;
1278
- --chit-bg-size: var(--fit);
1279
- &[disabled] {
1280
- opacity: 1;
1281
- }
1282
- }
1283
- &:not([src]):not([src=""]) fig-button,
1284
- &:hover fig-button {
1285
- opacity: 1;
1286
- pointer-events: all;
1287
- }
1288
- &[size="medium"] {
1289
- --image-size: 4rem;
1290
- }
1291
- &[size="large"] {
1292
- --image-size: 8rem;
1293
- }
1294
- &[size="auto"] {
1295
- --image-size: 6rem;
1296
- &[full]:not([full="false"]) {
1297
- --image-width: 100%;
1298
- }
1299
- }
1300
- &[aspect-ratio] {
1301
- height: auto;
1302
- fig-chit {
1303
- --size: 100% !important;
1304
- height: auto !important;
1305
- aspect-ratio: var(--aspect-ratio) !important;
1306
- }
1307
- }
1308
- > div {
1309
- display: flex;
1310
- gap: var(--spacer-2);
1311
- opacity: 0;
1312
- pointer-events: none;
1313
- }
1314
- &:not([src]):not([src=""]) > div,
1315
- &:hover > div {
1316
- opacity: 1;
1317
- pointer-events: all;
1318
- }
1319
- fig-button[type="download"] {
1320
- display: none;
1321
- }
1322
- &[src]:not([src=""]) {
1323
- fig-button[type="download"] {
1324
- display: inline-flex;
1325
- }
1326
- }
1327
- }
1328
-
1329
- /* Easing Curve */
1330
- fig-easing-curve {
1331
- display: flex;
1332
- flex-direction: column;
1333
- gap: var(--spacer-2);
1334
- --stroke-width: 1;
1335
- --easing-bezier-handle-radius: 4.25;
1336
- --easing-spring-handle-radius: 4.25;
1337
- --easing-handle-fill: var(--figma-color-border-strong);
1338
- --easing-handle-fill-active: var(--figma-color-bg-brand);
1339
- --easing-handle-stroke: var(--figma-color-bg-secondary);
1340
- --easing-handle-stroke-width: var(--stroke-width);
1341
- --easing-duration-bar-width: 4.25;
1342
- --easing-duration-bar-height: 16;
1343
- --easing-duration-bar-radius: 3;
1344
- --aspect-ratio: 1 / 1;
1345
- --easing-duration-bar-fill: var(--figma-color-border-strong);
1346
- --easing-duration-bar-stroke: var(--figma-color-bg-secondary);
1347
- --easing-duration-bar-stroke-width: var(--stroke-width);
1348
-
1349
- width: 100%;
1350
- .fig-easing-curve-svg {
1351
- width: 100%;
1352
- aspect-ratio: var(--aspect-ratio);
1353
- overflow: visible;
1354
- }
1355
- .fig-easing-curve-svg-container {
1356
- border-radius: var(--radius-medium);
1357
- background: var(--figma-color-bg-secondary);
1358
- padding: var(--spacer-3);
1359
- overflow: hidden;
1360
- &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
1361
- overflow: visible;
1362
- }
1363
- }
1364
- &.spring-mode {
1365
- .fig-easing-curve-svg-container,
1366
- .fig-easing-curve-svg {
1367
- cursor: ew-resize;
1368
- }
1369
- }
1370
- .fig-easing-curve-diagonal,
1371
- .fig-easing-curve-bounds,
1372
- .fig-easing-curve-arm,
1373
- .fig-easing-curve-path,
1374
- .fig-easing-curve-target {
1375
- pointer-events: none;
1376
- }
1377
- .fig-easing-curve-diagonal {
1378
- stroke: var(--figma-color-bordertranslucent);
1379
- stroke-width: var(--stroke-width);
1380
- stroke-linejoin: round;
1381
- stroke-linecap: round;
1382
- }
1383
- .fig-easing-curve-bounds {
1384
- fill: transparent;
1385
- }
1386
- .fig-easing-curve-arm {
1387
- stroke: var(--figma-color-border-strong);
1388
- stroke-width: var(--stroke-width);
1389
- stroke-linejoin: round;
1390
- stroke-linecap: round;
1391
- }
1392
- .fig-easing-curve-path {
1393
- fill: none;
1394
- stroke: var(--figma-color-text);
1395
- stroke-width: var(--stroke-width);
1396
- stroke-linejoin: round;
1397
- stroke-linecap: round;
1398
- }
1399
- .fig-easing-curve-target {
1400
- stroke: var(--figma-color-bordertranslucent);
1401
- stroke-width: var(--stroke-width);
1402
- stroke-linejoin: round;
1403
- stroke-linecap: round;
1404
- }
1405
- .fig-easing-curve-handle {
1406
- fill: var(--easing-handle-fill);
1407
- cursor: default;
1408
- pointer-events: all;
1409
- stroke: var(--easing-handle-stroke);
1410
- stroke-width: var(--easing-handle-stroke-width);
1411
- &:hover {
1412
- fill: var(--easing-handle-fill-active);
1413
- }
1414
- &:active {
1415
- cursor: grabbing;
1416
- fill: var(--easing-handle-fill-active);
1417
- }
1418
- }
1419
- .fig-easing-curve-endpoint {
1420
- fill: var(--easing-handle-fill);
1421
- }
1422
- .fig-easing-curve-duration-bar {
1423
- fill: var(--easing-duration-bar-fill);
1424
- stroke: var(--easing-duration-bar-stroke);
1425
- stroke-width: var(--easing-duration-bar-stroke-width);
1426
- cursor: default;
1427
- pointer-events: all;
1428
- &:hover {
1429
- fill: var(--easing-handle-fill-active);
1430
- }
1431
- &:active {
1432
- cursor: grabbing;
1433
- fill: var(--easing-handle-fill-active);
1434
- }
1435
- }
1436
- .fig-easing-curve-dropdown {
1437
- option svg {
1438
- vertical-align: middle;
1439
- }
1440
- }
1441
- }
1442
-
1443
- /* 3D Rotate */
1444
- fig-3d-rotate {
1445
- display: flex;
1446
- flex-wrap: wrap;
1447
- gap: var(--spacer-2);
1448
- width: 100%;
1449
- --aspect-ratio: 1 / 1;
1450
- --perspective: 20rem;
1451
- --perspective-origin: 50% 50%;
1452
- --transform-origin: 50% 50% -50cqi;
1453
- --gradient-start-color: light-dark(
1454
- rgba(0, 0, 0, 0.05),
1455
- rgba(255, 255, 255, 0.05)
1456
- );
1457
- --border-width: 1px;
1458
- --border-start-color: light-dark(
1459
- rgba(0, 0, 0, 0.1),
1460
- rgba(255, 255, 255, 0.1)
1461
- );
1462
- --border-end-color: transparent;
1463
- --border-end-color: transparent;
1464
- --gradient-end-color: transparent;
1465
- --figma-3d-rotate-handle-size: 6px;
1466
- --front-face-bg: light-dark(var(--figma-color-bg), #555);
1467
-
1468
- fig-field[direction="horizontal"] & {
1469
- flex: 1;
1470
- min-width: 0;
1471
- }
1472
-
1473
- > fig-input-number {
1474
- flex: 1 0 3rem;
1475
- }
1476
-
1477
- .fig-3d-rotate-container {
1478
- flex: 1 1 100%;
1479
- border-radius: var(--radius-medium);
1480
- background: var(--figma-color-bg-secondary);
1481
- padding: 0 2.5rem;
1482
- width: 100%;
1483
- aspect-ratio: var(--aspect-ratio);
1484
- display: flex;
1485
- align-items: center;
1486
- justify-content: center;
1487
- cursor: grab;
1488
- user-select: none;
1489
- overflow: hidden;
1490
-
1491
- &.dragging,
1492
- &:active {
1493
- cursor: grabbing;
1494
- }
1495
- &:focus {
1496
- outline: 0;
1497
- }
1498
- }
1499
-
1500
- .fig-3d-rotate-scene {
1501
- width: 100%;
1502
- aspect-ratio: 1 / 1;
1503
- max-height: max(3.5rem, 50%);
1504
- max-width: max(3.5rem, 50%);
1505
- perspective: var(--perspective, 20rem);
1506
- perspective-origin: var(--perspective-origin, 50% 50%);
1507
- container-type: inline-size;
1508
- }
1509
-
1510
- .fig-3d-rotate-cube {
1511
- width: 100%;
1512
- height: 100%;
1513
- position: relative;
1514
- aspect-ratio: 1 / 1;
1515
- transform-style: preserve-3d;
1516
- transform-origin: var(--transform-origin, 50% 50% -50cqi);
1517
- }
1518
-
1519
- .fig-3d-rotate-face {
1520
- position: absolute;
1521
- inset: 0;
1522
- backface-visibility: visible;
1523
- background: linear-gradient(
1524
- to bottom,
1525
- var(--gradient-start-color),
1526
- var(--gradient-end-color)
1527
- );
1528
- &.selected {
1529
- background: var(--figma-color-border-strong) !important;
1530
- inset: -1px;
1531
- border-radius: var(--radius-medium);
1532
- box-shadow: var(--elevation-100-canvas);
1533
- }
1534
-
1535
- &.front {
1536
- background: var(--front-face-bg);
1537
- border-radius: var(--radius-medium);
1538
- transform-style: preserve-3d;
1539
- box-shadow: var(--elevation-100-canvas);
1540
- inset: -1px;
1541
-
1542
- &::after {
1543
- content: "";
1544
- position: absolute;
1545
- width: var(--figma-3d-rotate-handle-size);
1546
- height: var(--figma-3d-rotate-handle-size);
1547
- border-radius: 50%;
1548
- background: var(--figma-color-border-strong);
1549
- top: 50%;
1550
- left: 50%;
1551
- transform: translate(-50%, -50%);
1552
- backface-visibility: hidden;
1553
- }
1554
- }
1555
- &.back {
1556
- transform-origin: 100% 50%;
1557
- transform: translateX(-100%) rotateY(-0.25turn) translateX(-100%)
1558
- rotateY(-0.25turn);
1559
- background: linear-gradient(
1560
- to bottom,
1561
- var(--border-start-color),
1562
- var(--border-end-color)
1563
- );
1564
- border-radius: var(--radius-medium);
1565
- }
1566
- &.right {
1567
- transform-origin: 0% 50%;
1568
- transform: translateX(100%) rotateY(0.25turn);
1569
- background: linear-gradient(
1570
- to right,
1571
- var(--gradient-start-color),
1572
- var(--gradient-end-color)
1573
- );
1574
- border-width: var(--border-width) 0;
1575
- border-style: solid;
1576
- border-image: linear-gradient(
1577
- to right,
1578
- var(--border-start-color),
1579
- var(--border-end-color)
1580
- )
1581
- 1;
1582
- }
1583
- &.left {
1584
- transform-origin: 100% 50%;
1585
- transform: translateX(-100%) rotateY(-0.25turn);
1586
- background: linear-gradient(
1587
- to left,
1588
- var(--gradient-start-color),
1589
- var(--gradient-end-color)
1590
- );
1591
- border-width: var(--border-width) 0;
1592
- border-style: solid;
1593
- border-image: linear-gradient(
1594
- to left,
1595
- var(--border-start-color),
1596
- var(--border-end-color)
1597
- )
1598
- 1;
1599
- }
1600
- &.top {
1601
- translate: 0 -100%;
1602
- transform-origin: 50% 100%;
1603
- transform: rotateX(0.25turn);
1604
- background: linear-gradient(
1605
- to top,
1606
- var(--gradient-start-color),
1607
- var(--gradient-end-color)
1608
- );
1609
- border-width: 0 var(--border-width);
1610
- border-style: solid;
1611
- border-image: linear-gradient(
1612
- to top,
1613
- var(--border-start-color),
1614
- var(--border-end-color)
1615
- )
1616
- 1;
1617
- }
1618
- &.bottom {
1619
- top: 100%;
1620
- bottom: auto;
1621
- transform-origin: 50% 0%;
1622
- transform: rotateX(-0.25turn);
1623
- background: linear-gradient(
1624
- to bottom,
1625
- var(--gradient-start-color),
1626
- var(--gradient-end-color)
1627
- );
1628
- border-width: 0 var(--border-width);
1629
- border-style: solid;
1630
- border-image: linear-gradient(
1631
- to bottom,
1632
- var(--border-start-color),
1633
- var(--border-end-color)
1634
- )
1635
- 1;
1636
- }
1637
- }
1638
- }
1639
-
1640
- /* Origin Grid */
1641
- fig-origin-grid {
1642
- display: flex;
1643
- flex-direction: column;
1644
- width: 100%;
1645
- gap: var(--spacer-2);
1646
- --aspect-ratio: 1 / 1;
1647
- --origin-grid-dot-size: 0.125rem;
1648
- --origin-grid-handle-size: 0.75rem;
1649
- --origin-grid-height: var(--spacer-4);
1650
-
1651
- fig-field[direction="horizontal"] & {
1652
- flex: 1;
1653
- min-width: 0;
1654
- }
1655
-
1656
- .fig-origin-grid-surface {
1657
- width: 100%;
1658
- aspect-ratio: var(--aspect-ratio);
1659
- min-height: calc(var(--origin-grid-height) * 3);
1660
- }
1661
-
1662
- .origin-grid {
1663
- position: relative;
1664
- container-type: size;
1665
- width: 100%;
1666
- height: 100%;
1667
- border-radius: var(--radius-medium);
1668
- background: var(--figma-color-bg-secondary);
1669
- user-select: none;
1670
- cursor: default;
1671
-
1672
- &.is-dragging {
1673
- cursor: grabbing !important;
1674
-
1675
- .origin-grid-handle {
1676
- cursor: grabbing !important;
1677
- }
1678
- }
1679
-
1680
- &.drag-disabled {
1681
- .origin-grid-handle {
1682
- cursor: default;
1683
- }
1684
- }
1685
- }
1686
-
1687
- .origin-grid-cells {
1688
- position: absolute;
1689
- inset: 0;
1690
- display: grid;
1691
- grid-template-columns: repeat(3, 1fr);
1692
- }
1693
-
1694
- .origin-grid-cell {
1695
- display: grid;
1696
- place-items: center;
1697
- width: 100%;
1698
- height: 100%;
1699
- min-height: var(--origin-grid-height);
1700
- color: var(--figma-color-icon-tertiary);
1701
- pointer-events: none;
1702
-
1703
- .origin-grid-dot {
1704
- width: var(--origin-grid-dot-size);
1705
- height: var(--origin-grid-dot-size);
1706
- border-radius: var(--radius-small);
1707
- background: currentColor;
1708
- }
1709
-
1710
- &.is-hovered {
1711
- color: var(--figma-color-bg-brand-secondary);
1712
-
1713
- .origin-grid-dot {
1714
- width: var(--origin-grid-handle-size);
1715
- height: var(--origin-grid-handle-size);
1716
- }
1717
- }
1718
- }
1719
-
1720
- .origin-grid-handle {
1721
- --origin-overflow-rotation: 0deg;
1722
- --origin-overflow-nudge-base: var(--spacer-2-5);
1723
- --origin-overflow-nudge-x: 0px;
1724
- --origin-overflow-nudge-y: 0px;
1725
- --origin-overflow-nudge-x-scale: calc((100cqb / 100cqi) * -1);
1726
- --origin-overflow-nudge-y-scale: calc((100cqb / 100cqi) * -1);
1727
- position: absolute;
1728
- left: 50%;
1729
- top: 50%;
1730
- width: var(--origin-grid-handle-size);
1731
- height: var(--origin-grid-handle-size);
1732
- border-radius: var(--radius-small);
1733
- background: var(--figma-color-bg-brand);
1734
- box-shadow:
1735
- 0 0 0 1px var(--figma-color-bg),
1736
- var(--elevation-100-canvas);
1737
- transform: translate(
1738
- calc(-50% + var(--origin-overflow-nudge-x)),
1739
- calc(-50% + var(--origin-overflow-nudge-y))
1740
- )
1741
- rotate(var(--origin-overflow-rotation));
1742
- cursor: default;
1743
- touch-action: none;
1744
-
1745
- &.beyond-bounds-x,
1746
- &.beyond-bounds-y {
1747
- -webkit-mask-image: var(--icon-arrow-left);
1748
- mask-image: var(--icon-arrow-left);
1749
- -webkit-mask-repeat: no-repeat;
1750
- mask-repeat: no-repeat;
1751
- -webkit-mask-position: center;
1752
- mask-position: center;
1753
- -webkit-mask-size: 24px 24px;
1754
- mask-size: 24px 24px;
1755
- border-radius: 0;
1756
- }
1757
-
1758
- &.beyond-bounds-x.overflow-right {
1759
- --origin-overflow-rotation: 180deg;
1760
- }
1761
-
1762
- &.beyond-bounds-y:not(.beyond-bounds-x) {
1763
- --origin-overflow-rotation: 90deg;
1764
- }
1765
-
1766
- &.beyond-bounds-y.overflow-down:not(.beyond-bounds-x) {
1767
- --origin-overflow-rotation: -90deg;
1768
- }
1769
-
1770
- &.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-up {
1771
- --origin-overflow-rotation: 45deg;
1772
- }
1773
-
1774
- &.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-down {
1775
- --origin-overflow-rotation: -45deg;
1776
- }
1777
-
1778
- &.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-up {
1779
- --origin-overflow-rotation: 135deg;
1780
- }
1781
-
1782
- &.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-down {
1783
- --origin-overflow-rotation: -135deg;
1784
- }
1785
-
1786
- &.overflow-left {
1787
- --origin-overflow-nudge-x: calc(
1788
- var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale)
1789
- );
1790
- }
1791
-
1792
- &.overflow-right {
1793
- --origin-overflow-nudge-x: calc(
1794
- var(--origin-overflow-nudge-base) *
1795
- var(--origin-overflow-nudge-x-scale) * -1
1796
- );
1797
- }
1798
-
1799
- &.overflow-up {
1800
- --origin-overflow-nudge-y: calc(
1801
- var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale)
1802
- );
1803
- }
1804
-
1805
- &.overflow-down {
1806
- --origin-overflow-nudge-y: calc(
1807
- var(--origin-overflow-nudge-base) *
1808
- var(--origin-overflow-nudge-y-scale) * -1
1809
- );
1810
- }
1811
- }
1812
-
1813
- .origin-values {
1814
- display: grid;
1815
- grid-template-columns: 1fr 1fr;
1816
- gap: var(--spacer-2);
1817
- }
1818
- }
1819
-
1820
- /* Combo input */
1821
- .input-combo {
1822
- display: inline-flex;
1823
- flex-wrap: nowrap;
1824
- align-items: center;
1825
- gap: 1px;
1826
-
1827
- & > label {
1828
- align-self: stretch;
1829
- color: var(--figma-color-text);
1830
- }
1831
-
1832
- & > * {
1833
- &:first-child:not(:last-child),
1834
- &:first-child:not(:last-child) > * {
1835
- border-top-right-radius: 0;
1836
- border-bottom-right-radius: 0;
1837
- }
1838
-
1839
- &:last-child:not(:first-child),
1840
- &:last-child:not(:first-child) > * {
1841
- border-top-left-radius: 0;
1842
- border-bottom-left-radius: 0;
1843
- }
1844
-
1845
- &:not(:last-child):not(:first-child),
1846
- &:not(:last-child):not(:first-child) > * {
1847
- border-radius: 0;
1848
- }
1849
- }
1850
- }
1851
-
1852
- /* Input Fill label */
1853
- .fig-input-fill-label {
1854
- display: inline-flex;
1855
- align-items: center;
1856
- padding: 0 var(--spacer-2) 0 var(--spacer-1);
1857
- height: var(--control-height);
1858
- font-size: var(--font-size-small);
1859
- color: var(--figma-color-text-secondary);
1860
- background: var(--figma-color-bg-secondary);
1861
- flex: 1;
1862
- min-width: 0;
1863
- user-select: none;
1864
- margin-left: -1px;
1865
- }
1866
-
1867
- /* Switch */
1868
- input[type="checkbox"].switch {
1869
- display: inline-flex;
1870
- margin: 0;
1871
- vertical-align: middle;
1872
- padding: 0;
1873
- width: 2rem;
1874
- height: 1rem;
1875
- left: 0;
1876
- top: 0;
1877
- margin: 0;
1878
- background: transparent;
1879
- appearance: none;
1880
- -moz-appearance: none;
1881
- -webkit-appearance: none;
1882
- outline: none;
1883
- border: 0;
1884
- align-items: center;
1885
- justify-content: center;
1886
- border-radius: 0.5rem;
1887
- background-color: var(--figma-color-bg-switch);
1888
- transition: var(--input-transition);
1889
- box-sizing: border-box;
1890
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1891
- }
1892
-
1893
- input[type="checkbox"].switch:after {
1894
- content: "";
1895
- background-color: var(--handle-color);
1896
- width: calc(1rem - 2px);
1897
- height: calc(1rem - 2px);
1898
- border-radius: 0.5rem;
1899
- margin: 1px;
1900
- transform: translate(calc(-0.5rem));
1901
- transition: var(--input-transition);
1902
- box-shadow: var(--handle-shadow);
1903
- }
1904
-
1905
- input[type="checkbox"].switch[indeterminate="true"]:after {
1906
- width: 0.5rem;
1907
- height: 0.125rem;
1908
- transform: none;
1909
- }
1910
-
1911
- input[type="checkbox"].switch[indeterminate="true"],
1912
- input[type="checkbox"].switch:checked {
1913
- background-color: var(--figma-color-bg-brand);
1914
- }
1915
-
1916
- input[type="checkbox"].switch:checked:after {
1917
- transform: translate(0.5rem);
1918
- }
1919
-
1920
- input[type="checkbox"].switch:disabled {
1921
- background-color: var(--figma-color-bg-secondary);
1922
- cursor: not-allowed;
1923
- &:after {
1924
- background-color: var(--figma-color-bg);
1925
- }
1926
- }
1927
-
1928
- input[type="checkbox"].switch:focus {
1929
- outline: 0;
1930
- }
1931
-
1932
- input[type="checkbox"].switch:checked:focus {
1933
- outline: 0;
1934
- }
1935
-
1936
- /* Checkbox */
1937
- input[type="checkbox"]:not(.switch) {
1938
- --size: 1rem;
1939
- appearance: none;
1940
- border-radius: var(--radius-medium);
1941
- width: var(--size);
1942
- height: var(--size);
1943
- aspect-ratio: 1/1;
1944
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1945
- background-color: var(--figma-color-bg-secondary);
1946
- vertical-align: middle;
1947
-
1948
- &::after {
1949
- content: "";
1950
- width: var(--size);
1951
- height: var(--size);
1952
- background-color: transparent;
1953
- mask-image: var(--icon-checkmark);
1954
- }
1955
- &:hover:not(:checked):not(:disabled) {
1956
- &::after {
1957
- opacity: 0.25;
1958
- background-color: var(--figma-color-icon);
1959
- }
1960
- }
1961
-
1962
- &:checked {
1963
- background-color: var(--figma-color-bg-brand);
1964
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
1965
- &::after {
1966
- background-color: var(--figma-color-icon-onbrand);
1967
- }
1968
- }
1969
-
1970
- &:focus {
1971
- outline: 0;
1972
-
1973
- &:not(:checked) {
1974
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
1975
- }
1976
- }
1977
- }
1978
- /* Light theme checkbox hover (black checkmark preview) */
1979
- /* @media is a no-JS fallback — ignored when setTheme() sets classes */
1980
- @media (prefers-color-scheme: light) {
1981
- :root:not(.figma-dark):not(.figma-light)
1982
- input[type="checkbox"]:not(.switch):not(:disabled):hover {
1983
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
1984
- }
1985
- }
1986
-
1987
- /* Class-based light theme override (primary mechanism via setTheme()) */
1988
- :root.figma-light input[type="checkbox"]:not(.switch):not(:disabled):hover {
1989
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
1990
- }
1991
-
1992
- label.checkbox:has([type="checkbox"]) {
1993
- padding-left: 1.5rem;
1994
-
1995
- & [type="radio"] {
1996
- margin-left: -1.5rem;
1997
- }
1998
- }
1999
-
2000
- /* Radio */
2001
- input[type="radio"] {
2002
- appearance: none;
2003
- border-radius: 0.5rem;
2004
- width: 1rem;
2005
- height: 1rem;
2006
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
2007
- background-color: var(--figma-color-bg-secondary);
2008
- vertical-align: middle;
2009
- margin: 0;
2010
- display: inline-grid;
2011
- place-content: center;
2012
-
2013
- &:checked {
2014
- background-color: var(--figma-color-bg-brand);
2015
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
2016
-
2017
- &::after {
2018
- transform: scale(1);
2019
- }
2020
- }
2021
-
2022
- &:focus {
2023
- outline: 0;
2024
-
2025
- &:not(:checked) {
2026
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
2027
- }
2028
- }
2029
-
2030
- &:hover:not(:checked):not(:disabled) {
2031
- &::after {
2032
- transform: scale(1);
2033
- opacity: 0.25;
2034
- background-color: var(--figma-color-icon);
2035
- }
2036
- }
2037
-
2038
- &::after {
2039
- content: "";
2040
- width: 0.375rem;
2041
- height: 0.375rem;
2042
- border-radius: 100%;
2043
- background-color: var(--figma-color-icon-onbrand);
2044
- transform: scale(0);
2045
- box-shadow:
2046
- 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
2047
- 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
2048
- 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
2049
- 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
2050
- }
2051
- }
2052
-
2053
- label.radio:has([type="radio"]) {
2054
- padding-left: 1.5rem;
2055
-
2056
- & [type="radio"] {
2057
- margin-left: -1.5rem;
2058
- }
2059
- }
2060
-
2061
- /* Fieldset */
2062
- fieldset {
2063
- display: flex;
2064
- flex-direction: column;
2065
- gap: 0.25rem;
2066
- border: 0;
2067
- align-items: start;
2068
- padding: var(--spacer-2) 0;
2069
-
2070
- & > legend {
2071
- margin-top: 0.125rem;
2072
- font-weight: 500;
2073
- font-size: 0.625rem;
2074
- line-height: 0.875rem;
2075
- color: var(--figma-color-text-secondary);
2076
- }
2077
-
2078
- & > label {
2079
- display: grid;
2080
- width: 100%;
2081
- grid-template-columns: 4rem 1fr;
2082
- column-gap: var(--spacer-2);
2083
- align-items: center;
2084
- }
2085
- }
2086
-
2087
- /* Details */
2088
- details {
2089
- & > summary {
2090
- font-weight: var(--body-medium-strong-fontWeight);
2091
- cursor: default;
2092
- display: flex;
2093
- align-items: center;
2094
- padding: 0 1rem 0 0;
2095
- height: var(--spacer-5);
2096
- user-select: none;
2097
- color: var(--figma-color-text-secondary);
2098
-
2099
- &::before {
2100
- content: "";
2101
- mask-image: var(--icon-chevron);
2102
- display: inline-flex;
2103
- background: var(--figma-color-text-secondary);
2104
- align-items: start;
2105
- justify-content: center;
2106
- width: 1rem;
2107
- height: 1rem;
2108
- transform: rotate(-90deg);
2109
- transition: transform var(--transition-duration)
2110
- var(--transition-timing-function);
2111
- }
2112
- &::-webkit-details-marker {
2113
- display: none;
2114
- }
2115
- &::marker {
2116
- content: "";
2117
- }
2118
- }
2119
-
2120
- & > summary:hover,
2121
- &[open] > summary {
2122
- color: inherit;
2123
-
2124
- &::before {
2125
- opacity: 1;
2126
- }
2127
- }
2128
-
2129
- &[open] {
2130
- & > summary::before {
2131
- transform: rotate(0deg);
2132
- }
2133
- }
2134
- }
2135
-
2136
- /* Sliders */
2137
- .fig-slider,
2138
- fig-slider {
2139
- --slider-field-height: 1.5rem;
2140
- --slider-height: 1rem;
2141
- --slider-thumb-size: var(--slider-height);
2142
- --slider-percent: calc(var(--slider-complete) * 100%);
2143
- --start-percent: calc(var(--default, 0) * 100%);
2144
- --slider-tick-size: calc(var(--slider-height) / 4);
2145
- --slider-handle-shadow:
2146
- inset 0 0 0 calc(4px + 0.5rem * var(--unchanged)) var(--handle-color),
2147
- 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
2148
- --slider-handle-shadow-focus:
2149
- inset 0 0 0 4px var(--handle-color), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
2150
- var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);
2151
- --slider-transition: none;
2152
- --handle-transition: var(--slider-transition);
2153
-
2154
- display: inline-flex;
2155
- align-items: center;
2156
- position: relative;
2157
- height: var(--slider-field-height);
2158
- transition: var(--slider-transition);
2159
-
2160
- .fig-slider-input-container {
2161
- height: var(--slider-height);
2162
- position: relative;
2163
- display: block;
2164
- width: 100%;
2165
- transition: var(--slider-transition);
2166
- background: var(--figma-color-bg-secondary);
2167
- border-radius: 0.5rem;
2168
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
2169
-
2170
- /* Track */
2171
- &::before {
2172
- content: "";
2173
- background: var(--figma-color-bg-brand);
2174
- position: absolute;
2175
- left: 0;
2176
- top: 0;
2177
- pointer-events: none;
2178
- bottom: 0;
2179
- border-radius: 0.5rem;
2180
- min-width: var(--slider-height);
2181
- box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
2182
- width: calc(
2183
- var(--slider-percent) + (1 - var(--slider-complete)) *
2184
- var(--slider-height)
2185
- );
2186
- max-width: 100%;
2187
- }
2188
- }
2189
- &[type="stepper"] {
2190
- .fig-slider-input-container {
2191
- &::before {
2192
- display: none;
2193
- }
2194
- }
2195
- }
2196
-
2197
- &[type="delta"] {
2198
- datalist option {
2199
- position: absolute;
2200
- margin: 0;
2201
- left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
2202
- top: calc(50% - var(--slider-tick-size) / 2);
2203
- }
2204
- .fig-slider-input-container {
2205
- &::before {
2206
- --left-start: calc(var(--start-percent) - var(--slider-height) / 2);
2207
- left: min(
2208
- var(--left-start),
2209
- var(--slider-percent) - (var(--slider-complete)) *
2210
- var(--slider-height)
2211
- );
2212
- --width: calc(var(--slider-percent) - var(--start-percent));
2213
- --abs-width: max(
2214
- var(--width) + var(--slider-height) / 2 +
2215
- (1 - var(--slider-complete)) * var(--slider-height),
2216
- -1 * var(--width) + var(--slider-height) / 2 +
2217
- (var(--slider-complete)) * var(--slider-height)
2218
- );
2219
- width: var(--abs-width);
2220
- --delta: calc(var(--slider-complete) - var(--default));
2221
- --abs-delta: max(var(--delta), -1 * var(--delta));
2222
- opacity: calc(var(--abs-delta) * 100);
2223
- }
2224
- }
2225
- }
2226
-
2227
- &[type="hue"],
2228
- &[type="opacity"] {
2229
- .fig-slider-input-container {
2230
- &::before {
2231
- display: none;
2232
- }
2233
- }
2234
- }
2235
-
2236
- /* Chromium */
2237
- input[type="range"] {
2238
- height: var(--slider-height);
2239
- appearance: none;
2240
- -webkit-appearance: none;
2241
- border-radius: calc(var(--slider-height) / 2);
2242
- display: block;
2243
- width: 100%;
2244
- background-color: transparent;
2245
- transition: var(--slider-transition);
2246
- position: relative;
2247
-
2248
- &:active::-webkit-slider-thumb {
2249
- cursor: grabbing;
2250
- cursor: -webkit-grabbing;
2251
- }
2252
-
2253
- &:focus {
2254
- outline: none;
2255
- }
2256
-
2257
- &::-webkit-slider-thumb {
2258
- appearance: none;
2259
- background: transparent;
2260
- -webkit-appearance: none;
2261
- color-scheme: inherit;
2262
- transition: var(--handle-transition);
2263
- border-radius: 100%;
2264
- height: var(--slider-thumb-size);
2265
- width: var(--slider-thumb-size);
2266
- margin-top: calc(var(--slider-height) / 2 - var(--slider-thumb-size) / 2);
2267
- aspect-ratio: 1;
2268
- border: none;
2269
- position: relative;
2270
- z-index: 1;
2271
- cursor: default;
2272
- box-shadow: var(--slider-handle-shadow);
2273
- }
2274
-
2275
- &:disabled {
2276
- cursor: not-allowed;
2277
-
2278
- &::-webkit-slider-runnable-track {
2279
- color-scheme: inherit;
2280
- background: linear-gradient(
2281
- to right,
2282
- var(--figma-color-bg-secondary) 0%,
2283
- var(--figma-color-bg-secondary) var(--slider-percent),
2284
- var(--figma-color-bg) var(--slider-percent)
2285
- );
2286
- }
2287
-
2288
- &::-webkit-slider-thumb {
2289
- box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
2290
- }
2291
- }
2292
-
2293
- &::-webkit-slider-runnable-track {
2294
- color-scheme: inherit;
2295
- height: var(--slider-height);
2296
- background-color: transparent;
2297
- transition: var(--slider-transition);
2298
- border-radius: calc(var(--slider-height) / 2);
2299
- }
2300
-
2301
- &.hue::-webkit-slider-runnable-track {
2302
- background: var(--bg-hue);
2303
- }
2304
-
2305
- &.opacity::-webkit-slider-runnable-track {
2306
- background:
2307
- linear-gradient(to right, transparent, var(--color)),
2308
- var(--checkerboard);
2309
- }
2310
- }
2311
-
2312
- /* Firefox */
2313
- input[type="range"] {
2314
- height: var(--slider-height);
2315
- appearance: none;
2316
- -moz-appearance: none;
2317
- border-radius: calc(var(--slider-height) / 2);
2318
- display: block;
2319
- width: 100%;
2320
- background-color: transparent;
2321
- transition: var(--slider-transition);
2322
- position: relative;
2323
-
2324
- &:focus {
2325
- outline: none;
2326
- }
2327
-
2328
- &:active::-moz-range-thumb {
2329
- cursor: grabbing;
2330
- cursor: -webkit-grabbing;
2331
- }
2332
-
2333
- &::-moz-range-thumb {
2334
- color-scheme: inherit;
2335
- appearance: none;
2336
- -moz-appearance: none;
2337
- background: transparent;
2338
- border-radius: 100%;
2339
- height: var(--slider-thumb-size);
2340
- width: var(--slider-thumb-size);
2341
- aspect-ratio: 1;
2342
- border: none;
2343
- position: relative;
2344
- z-index: 1;
2345
- cursor: default;
2346
- box-shadow: var(--slider-handle-shadow);
2347
- transition: var(--handle-transition);
2348
- }
2349
-
2350
- &:disabled {
2351
- cursor: not-allowed;
2352
-
2353
- &::-moz-range-track {
2354
- color-scheme: inherit;
2355
- background: linear-gradient(
2356
- to right,
2357
- var(--figma-color-bg-secondary) 0%,
2358
- var(--figma-color-bg-secondary) var(--slider-percent),
2359
- var(--figma-color-bg) var(--slider-percent)
2360
- );
2361
- }
2362
-
2363
- &::-moz-range-thumb {
2364
- box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
2365
- }
2366
- }
2367
-
2368
- &::-moz-range-track {
2369
- height: var(--slider-height);
2370
- background-color: transparent;
2371
- border-radius: calc(var(--slider-height) / 2);
2372
- transition: var(--slider-transition);
2373
- }
2374
-
2375
- &.hue::-moz-range-track {
2376
- background: var(--bg-hue);
2377
- }
2378
-
2379
- &.opacity::-moz-range-track {
2380
- background:
2381
- linear-gradient(to right, transparent, var(--color)),
2382
- var(--checkerboard);
2383
- }
2384
- }
2385
-
2386
- datalist {
2387
- position: absolute;
2388
- inset: 0;
2389
- top: 0;
2390
- display: flex;
2391
- transition: var(--slider-transition);
2392
- background: transparent;
2393
- align-items: center;
2394
- margin: 0;
2395
- border: 0;
2396
- appearance: none;
2397
- padding: 0 calc((var(--slider-height) / 2) - var(--slider-tick-size) / 2);
2398
- height: var(--slider-height);
2399
- pointer-events: none;
2400
- justify-content: space-between;
2401
- width: 100%;
2402
-
2403
- & option {
2404
- appearance: none;
2405
- width: var(--slider-tick-size);
2406
- height: var(--slider-tick-size);
2407
- aspect-ratio: 1;
2408
- padding: 0;
2409
- border: 0;
2410
- border-radius: 100%;
2411
- font-size: 0;
2412
- background: var(--figma-color-icon-tertiary);
2413
- display: block;
2414
- &[default] {
2415
- background: var(--figma-color-icon);
2416
- }
2417
-
2418
- &:first-child:last-child {
2419
- margin: 0 auto;
2420
- }
2421
- }
2422
- }
2423
-
2424
- &[variant="minimal"] {
2425
- --slider-height: 0.375rem;
2426
- --slider-thumb-size: 0.75rem;
2427
- --slider-tick-size: calc(var(--slider-height) / 2);
2428
- --handle-transition: none;
2429
- --slider-transition: none;
2430
- --slider-handle-shadow:
2431
- inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
2432
- 0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
2433
- var(--figma-elevation-100);
2434
-
2435
- .fig-slider-input-container {
2436
- height: var(--slider-height);
2437
- position: relative;
2438
- display: block;
2439
- width: 100%;
2440
- }
2441
- fig-input-text {
2442
- height: calc(var(--slider-height) * 2);
2443
- background-color: transparent;
2444
- }
2445
-
2446
- &:hover,
2447
- &:focus-within {
2448
- fig-input-text {
2449
- height: auto;
2450
- }
2451
- }
2452
- }
2453
- &[variant="neue"] {
2454
- --slider-height: 0.375rem;
2455
- --slider-thumb-size: 0.75rem;
2456
- --slider-tick-size: calc(var(--slider-height) / 2);
2457
- --handle-transition: none;
2458
- --slider-transition: none;
2459
- --slider-handle-shadow:
2460
- inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
2461
- 0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
2462
- var(--figma-elevation-100);
2463
-
2464
- background-color: var(--figma-color-bg-secondary);
2465
- border-radius: var(--radius-medium);
2466
- padding-left: var(--spacer-2);
2467
-
2468
- &:not([text="true"]) {
2469
- padding-right: var(--spacer-2);
2470
- }
2471
-
2472
- .fig-slider-input-container {
2473
- height: var(--slider-height);
2474
- position: relative;
2475
- display: block;
2476
- width: 100%;
2477
- box-shadow: none;
2478
- background-color: var(--figma-color-bg-tertiary);
2479
- }
2480
- fig-input-text,
2481
- fig-input-number {
2482
- flex-basis: 5rem;
2483
- border-top-left-radius: 0;
2484
- border-bottom-left-radius: 0;
2485
- border-left: 1px solid var(--figma-color-bg);
2486
- }
2487
-
2488
- &:hover,
2489
- &:focus-within {
2490
- fig-input-text,
2491
- fig-input-number {
2492
- height: auto;
2493
- }
2494
- }
2495
- }
2496
- }
2497
-
2498
- /* Popovers/Dialogs */
2499
- .dialog,
2500
- dialog,
2501
- .popover,
2502
- [popover] {
2503
- padding: 0;
2504
- outline: 0;
2505
- border: 0;
2506
- inset: auto;
2507
- color: var(--figma-color-text);
2508
- border-radius: var(--radius-large, 0.8125rem);
2509
- background: var(--figma-color-bg);
2510
- min-width: var(--popover-min-width);
2511
-
2512
- box-shadow: var(--figma-elevation-500-modal-window);
2513
-
2514
- footer {
2515
- display: flex;
2516
- justify-content: flex-end;
2517
- padding: var(--spacer-2);
2518
- gap: var(--spacer-2);
2519
- }
2520
- p {
2521
- padding: 0 var(--spacer-3);
2522
- }
2523
-
2524
- &:popover-open {
2525
- display: block;
2526
- outline: none !important;
2527
- }
2528
-
2529
- & header {
2530
- height: var(--spacer-6);
2531
- margin: 0;
2532
- padding: var(--spacer-2);
2533
- display: flex;
2534
- align-items: center;
2535
- font-weight: var(--body-medium-strong-fontWeight);
2536
- box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
2537
-
2538
- & h3 {
2539
- font: inherit;
2540
- }
2541
-
2542
- & > :first-child {
2543
- padding-left: var(--spacer-2);
2544
- }
2545
- }
2546
-
2547
- &[tooltip] {
2548
- color: var(--color-tooltip);
2549
- background-color: var(--bg-tooltip);
2550
- padding: var(--spacer-1) var(--spacer-2);
2551
- line-height: 1rem !important;
2552
- box-sizing: content-box;
2553
- min-width: var(--popover-min-width);
2554
- max-width: var(--popover-min-width);
2555
- /*top: calc(anchor(top) - 1ch - (var(--spacer-1) * 2 + 1rem));*/
2556
- top: anchor(top);
2557
- left: anchor(center);
2558
- /*transform: translate(-50%,-100%);*/
2559
-
2560
- white-space: nowrap;
2561
- overflow: hidden;
2562
- text-overflow: ellipsis;
2563
-
2564
- border-radius: var(--radius-medium, 0.3125rem);
2565
- box-shadow:
2566
- 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
2567
- 0px 5px 12px 0px rgba(0, 0, 0, 0.13),
2568
- 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
2569
-
2570
- @supports (-webkit-line-clamp: 2) {
2571
- white-space: initial;
2572
- -webkit-line-clamp: 2;
2573
- -webkit-box-orient: vertical;
2574
- }
2575
-
2576
- &:popover-open {
2577
- display: inline-block;
2578
-
2579
- @supports (-webkit-line-clamp: 2) {
2580
- display: -webkit-box;
2581
- }
2582
-
2583
- min-width: 0;
2584
- }
2585
- }
2586
- }
2587
- dialog[is="fig-dialog"] {
2588
- --z-index: 999999;
2589
- z-index: var(--z-index);
2590
- }
2591
-
2592
- dialog[is="fig-popup"] {
2593
- --z-index: 999999;
2594
- --beak-offset: 1px;
2595
- z-index: var(--z-index);
2596
- position: fixed;
2597
- margin: 0;
2598
- min-width: 0;
2599
- padding: 0;
2600
- overflow: auto;
2601
-
2602
- &[autoresize]:not([autoresize="false"]) {
2603
- width: max-content;
2604
- max-width: calc(100vw - var(--spacer-4));
2605
- max-height: calc(100vh - var(--spacer-4));
2606
- }
2607
-
2608
- &[open] {
2609
- display: block;
2610
- }
2611
-
2612
- &[theme="dark"] {
2613
- color-scheme: dark;
2614
- }
2615
-
2616
- &[theme="light"] {
2617
- color-scheme: light;
2618
- }
2619
-
2620
- &[theme="menu"] {
2621
- background-color: var(--figma-color-bg-menu);
2622
- color: var(--figma-color-text-menu);
2623
- color-scheme: dark;
2624
- }
2625
-
2626
- &[variant="popover"] {
2627
- overflow: visible;
2628
- box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
2629
- filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
2630
- drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
2631
- drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
2632
-
2633
- &:after {
2634
- content: "";
2635
- background-color: inherit;
2636
- clip-path: path(
2637
- "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
2638
- );
2639
- position: absolute;
2640
- width: 1rem;
2641
- height: 6px;
2642
- z-index: 2;
2643
- pointer-events: none;
2644
- }
2645
-
2646
- &[data-beak-side="bottom"]:after {
2647
- top: calc(100% - 1px);
2648
- left: var(--beak-offset, 50%);
2649
- transform: translateX(-50%);
2650
- }
2651
-
2652
- &[data-beak-side="top"]:after {
2653
- top: 1px;
2654
- left: var(--beak-offset, 50%);
2655
- transform: translate(-50%, -100%) scaleY(-1);
2656
- }
2657
-
2658
- &[data-beak-side="left"]:after {
2659
- left: 6px;
2660
- top: var(--beak-offset, 50%);
2661
- transform: translate(-100%, -50%) rotate(90deg);
2662
- }
2663
-
2664
- &[data-beak-side="right"]:after {
2665
- left: calc(100% - 6px);
2666
- top: var(--beak-offset, 50%);
2667
- transform: translate(0, -50%) rotate(-90deg);
2668
- }
2669
- }
2670
- }
2671
-
2672
- dialog[is="fig-toast"] {
2673
- --z-index: 999999;
2674
- z-index: var(--z-index);
2675
- box-shadow: var(--figma-elevation-100);
2676
- border-radius: var(--radius-large);
2677
- padding: var(--spacer-2) var(--spacer-3);
2678
- align-items: center;
2679
- gap: var(--spacer-2);
2680
- height: 2.5rem;
2681
- justify-content: center;
2682
- min-width: 0;
2683
- color: var(--figma-color-text);
2684
-
2685
- &[open] {
2686
- display: flex;
2687
- }
2688
-
2689
- & p {
2690
- margin: 0;
2691
- padding: 0;
2692
- color: inherit;
2693
- font-weight: var(--body-medium-strong-fontWeight);
2694
- }
2695
-
2696
- hr[vertical] {
2697
- margin: 0;
2698
- }
2699
-
2700
- & fig-button:last-child {
2701
- margin-right: calc(var(--spacer-2) * -1);
2702
- }
2703
-
2704
- /* Theme: Dark (default) - hardcoded to ensure consistency regardless of global theme */
2705
- &[theme="dark"] {
2706
- background-color: #2c2c2c;
2707
- color: rgba(255, 255, 255, 0.9);
2708
- color-scheme: dark;
2709
- }
2710
-
2711
- /* Theme: Light - hardcoded to ensure consistency regardless of global theme */
2712
- &[theme="light"] {
2713
- background-color: #ffffff;
2714
- color: rgba(0, 0, 0, 0.9);
2715
- box-shadow: var(--figma-elevation-500-modal-window);
2716
- color-scheme: light;
2717
- }
2718
-
2719
- /* Theme: Danger - hardcoded to ensure consistency regardless of global theme */
2720
- &[theme="danger"] {
2721
- background-color: #f24822;
2722
- color: #ffffff;
2723
- color-scheme: dark;
2724
- }
2725
-
2726
- /* Theme: Brand - hardcoded to ensure consistency regardless of global theme */
2727
- &[theme="brand"] {
2728
- background-color: #0d99ff;
2729
- color: #ffffff;
2730
- color-scheme: dark;
2731
- }
2732
- }
2733
-
2734
- /* Tooltip */
2735
- fig-tooltip {
2736
- display: contents;
2737
- }
2738
- .fig-tooltip {
2739
- inset: unset;
2740
- display: inline-block;
2741
- color: var(--color-tooltip);
2742
- background-color: var(--bg-tooltip);
2743
- padding: var(--spacer-1) var(--spacer-2);
2744
- line-height: 1rem !important;
2745
- font-weight: inherit;
2746
- border-radius: var(--radius-medium, 0.3125rem);
2747
- max-width: 180px;
2748
- width: max-content;
2749
-
2750
- & > span {
2751
- text-wrap: balance;
2752
- max-height: 2.5rem;
2753
- overflow-y: hidden;
2754
- display: -webkit-box;
2755
- -webkit-line-clamp: 2;
2756
- -webkit-box-orient: vertical;
2757
- line-clamp: 2;
2758
- text-overflow: ellipsis;
2759
- width: auto;
2760
- }
2761
-
2762
- &:after {
2763
- content: "";
2764
- background-color: var(--bg-tooltip);
2765
- clip-path: path(
2766
- "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
2767
- );
2768
- width: 1rem;
2769
- height: 6px;
2770
- position: absolute;
2771
- top: calc(100% - 1px);
2772
- left: var(--beak-offset, 50%);
2773
- z-index: 2;
2774
- transform: translate(-50%);
2775
- }
2776
-
2777
- &[position="bottom"] {
2778
- &:after {
2779
- top: 1px;
2780
- left: var(--beak-offset, 50%);
2781
- transform: translate(-50%, -100%) scaleY(-1);
2782
- }
2783
- }
2784
- }
2785
-
2786
- .fig-tooltip {
2787
- overflow: visible;
2788
- box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
2789
- filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
2790
- drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
2791
- drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
2792
-
2793
- &:after {
2794
- content: "";
2795
- background-color: inherit;
2796
- clip-path: path(
2797
- "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
2798
- );
2799
- width: 1rem;
2800
- height: 6px;
2801
- position: absolute;
2802
- top: calc(100% - 1px);
2803
- left: var(--beak-offset, 50%);
2804
- z-index: 2;
2805
- transform: translate(-50%);
2806
- }
2807
-
2808
- &[position="bottom"] {
2809
- &:after {
2810
- top: 1px;
2811
- left: var(--beak-offset, 50%);
2812
- transform: translate(-50%, -100%) scaleY(-1);
2813
- }
2814
- }
2815
- }
2816
-
2817
- /* UI Icons */
2818
- fig-icon {
2819
- display: block;
2820
- }
2821
-
2822
- fig-icon.close {
2823
- width: 1rem;
2824
- height: 1rem;
2825
- background-color: var(--figma-color-text);
2826
- clip-path: path(
2827
- "M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z"
2828
- );
2829
- }
2830
-
2831
- /* Web Components */
2832
- fig-button,
2833
- fig-content,
2834
- fig-slider,
2835
- fig-switch,
2836
- fig-input-color,
2837
- fig-input-fill,
2838
- fig-checkbox,
2839
- fig-radio,
2840
- fig-tab,
2841
- fig-tabs,
2842
- fig-segmented-control {
2843
- display: inline-flex;
2844
- gap: var(--spacer-2);
2845
- user-select: none;
2846
-
2847
- &[full] {
2848
- display: flex;
2849
- width: 100%;
2850
- }
2851
- }
2852
-
2853
- fig-checkbox,
2854
- fig-radio {
2855
- align-items: center;
2856
- padding-top: 0.25rem;
2857
- padding-bottom: 0.25rem;
2858
-
2859
- & label span {
2860
- vertical-align: middle;
2861
- }
2862
- }
2863
-
2864
- fig-switch {
2865
- align-items: center;
2866
- padding-top: 0.25rem;
2867
- padding-bottom: 0.25rem;
2868
- }
2869
-
2870
- fig-input-color {
2871
- --alpha: 1;
2872
- }
2873
-
2874
- fig-header {
2875
- height: var(--spacer-6);
2876
- margin: 0;
2877
- padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
2878
- display: flex;
2879
- align-items: center;
2880
- box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
2881
- gap: 0.25rem;
2882
-
2883
- & h3 {
2884
- font-weight: var(--body-medium-strong-fontWeight);
2885
- flex-grow: 1;
2886
- }
2887
-
2888
- &[borderless] {
2889
- box-shadow: none;
2890
- }
2891
- }
2892
-
2893
- fig-footer {
2894
- display: flex;
2895
- align-items: center;
2896
- justify-content: flex-end;
2897
- gap: var(--spacer-2);
2898
- height: var(--spacer-6);
2899
- padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
2900
- box-shadow: inset 0 1px 0 0 var(--figma-color-border);
2901
-
2902
- & h3 {
2903
- font-weight: var(--body-medium-strong-fontWeight);
2904
- flex-grow: 1;
2905
- display: flex;
2906
- align-items: baseline;
2907
- gap: var(--spacer-half);
2908
- }
2909
-
2910
- &[borderless] {
2911
- box-shadow: none;
2912
- }
2913
-
2914
- &[sticky]:not([sticky="false"]) {
2915
- position: sticky;
2916
- bottom: 0;
2917
- z-index: 10;
2918
- margin-top: auto;
2919
- background: var(--figma-color-bg);
2920
- }
2921
- }
2922
-
2923
- fig-content {
2924
- padding: var(--spacer-2) 0;
2925
- display: block;
2926
- }
2927
-
2928
- vstack,
2929
- .vstack,
2930
- [vstack] {
2931
- display: flex;
2932
- flex-direction: column;
2933
- align-items: start;
2934
- gap: var(--spacer-2);
2935
- flex-wrap: wrap;
2936
- }
2937
-
2938
- hstack,
2939
- .hstack,
2940
- [hstack] {
2941
- display: flex;
2942
- gap: var(--spacer-2);
2943
- align-items: start;
2944
- flex-wrap: nowrap;
2945
- }
2946
-
2947
- fig-input-text,
2948
- fig-input-number {
2949
- background-color: var(--figma-color-bg-secondary);
2950
- border: 0;
2951
- border-radius: var(--radius-medium);
2952
- display: inline-flex;
2953
- flex-wrap: nowrap;
2954
- justify-content: center;
2955
- user-select: all;
2956
- gap: 0;
2957
- min-width: 0;
2958
- flex: 1;
2959
- color: var(--figma-color-text);
2960
-
2961
- &[multiline] {
2962
- display: flex;
2963
- width: 100%; /* Multiline defaults to full width */
2964
- }
2965
- &[autoresize] input,
2966
- &[autoresize] textarea {
2967
- field-sizing: content;
2968
- }
2969
- &[resizable] input,
2970
- &[resizable] textarea {
2971
- resize: both;
2972
- }
2973
- &[resizable]:has(textarea[style*="width"]),
2974
- &[resizable]:has(textarea[style*="height"]),
2975
- &[resizable]:has(input[style*="width"]),
2976
- &[resizable]:has(input[style*="height"]) {
2977
- flex: unset;
2978
- }
2979
-
2980
- & label,
2981
- & [slot] {
2982
- display: flex;
2983
- flex-wrap: nowrap;
2984
- justify-content: center;
2985
- align-items: center;
2986
- width: 100%;
2987
- }
2988
-
2989
- & [slot] {
2990
- user-select: none;
2991
- width: 1.5rem;
2992
- color: var(--figma-color-text-secondary);
2993
- }
2994
-
2995
- & [slot="prepend"] {
2996
- padding-right: 0;
2997
- margin-right: calc(var(--spacer-2) * -1);
2998
- }
2999
-
3000
- & [slot="append"] {
3001
- padding-left: 0;
3002
- margin-left: calc(var(--spacer-2) * -1);
3003
- }
3004
-
3005
- & input {
3006
- background-color: transparent !important;
3007
- flex: 1;
3008
-
3009
- &:focus,
3010
- &:active {
3011
- box-shadow: none !important;
3012
- }
3013
- }
3014
-
3015
- &:has(input:focus) {
3016
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3017
- outline: 0;
3018
- }
3019
- &:hover {
3020
- box-shadow: inset 0 0 0 1px var(--figma-color-border);
3021
- }
3022
- /* Disabled */
3023
- &[disabled]:not([disabled="false"]) {
3024
- background-color: var(--figma-color-bg);
3025
- pointer-events: none;
3026
- cursor: not-allowed;
3027
- color: var(--figma-color-text-disabled);
3028
- box-shadow: inset 0 0 0 1px var(--figma-color-border-disabled);
3029
- & [slot] {
3030
- color: var(--figma-color-text-disabled);
3031
- }
3032
- }
3033
- }
3034
-
3035
- fig-input-number > [slot],
3036
- fig-input-text[type="number"] > [slot] {
3037
- cursor: ew-resize !important;
3038
- }
3039
-
3040
- fig-input-color,
3041
- fig-input-fill {
3042
- & > .input-combo > fig-chit:not(:only-child),
3043
- & > .input-combo > fig-chit:not(:only-child) > input,
3044
- & > .input-combo > fig-fill-picker:not(:only-child),
3045
- & > .input-combo > fig-fill-picker:not(:only-child) > fig-chit > input,
3046
- & fig-fill-picker:not(:only-child) {
3047
- border-top-right-radius: 0 !important;
3048
- border-bottom-right-radius: 0 !important;
3049
- }
3050
-
3051
- & > .input-combo {
3052
- flex: 1;
3053
- min-width: 0;
3054
- }
3055
-
3056
- fig-input-number {
3057
- flex: 0;
3058
- flex-basis: 3rem;
3059
- }
3060
-
3061
- &[disabled]:not([disabled="false"]) {
3062
- .input-combo {
3063
- gap: 0;
3064
- }
3065
- }
3066
-
3067
- fig-field[direction="horizontal"] &,
3068
- fig-field[direction="row"] & {
3069
- flex: 1;
3070
- min-width: 0;
3071
- }
3072
- }
3073
-
3074
- fig-slider {
3075
- display: flex;
3076
-
3077
- & .slider {
3078
- flex-grow: 1;
3079
- }
3080
-
3081
- & fig-input-number {
3082
- flex-basis: 5rem;
3083
- }
3084
-
3085
- fig-field[direction="horizontal"] &,
3086
- fig-field[direction="row"] & {
3087
- flex: 1;
3088
- min-width: 0;
3089
- }
3090
- }
3091
-
3092
- fig-field,
3093
- .fig-field {
3094
- --field-label-width: 4rem;
3095
- display: flex;
3096
- padding: var(--spacer-1) var(--spacer-3);
3097
- margin: 0;
3098
- flex-direction: column;
3099
- gap: 0;
3100
- align-items: start;
3101
-
3102
- &[direction="row"],
3103
- &[direction="horizontal"] {
3104
- flex-direction: row;
3105
- align-items: center;
3106
- gap: var(--spacer-2);
3107
- }
3108
-
3109
- & > [full] {
3110
- flex: 1;
3111
- flex: 1 1 auto;
3112
- }
3113
-
3114
- & > label {
3115
- flex: 0;
3116
- padding: var(--spacer-1) 0;
3117
- display: flex;
3118
- justify-content: space-between;
3119
- min-height: calc(1rem + var(--spacer-1) * 2);
3120
- align-items: center;
3121
- width: 100%;
3122
- }
3123
-
3124
- &[direction="row"] > label,
3125
- &[direction="horizontal"] > label {
3126
- width: auto;
3127
- min-width: var(--field-label-width);
3128
- }
3129
-
3130
- &[direction="horizontal"] {
3131
- gap: var(--spacer-2);
3132
- align-items: start;
3133
- flex-direction: row;
3134
-
3135
- & > label {
3136
- min-width: 4rem;
3137
- }
3138
- &[columns="thirds"] {
3139
- display: grid;
3140
- grid-template-columns: repeat(3, 1fr);
3141
- gap: var(--spacer-2);
3142
-
3143
- & > label {
3144
- grid-column: 1;
3145
- }
3146
-
3147
- & > label ~ * {
3148
- grid-column: 2 / span 2;
3149
- }
3150
- }
3151
- &[columns="half"] {
3152
- display: grid;
3153
- grid-template-columns: repeat(2, 1fr);
3154
- gap: var(--spacer-2);
3155
-
3156
- & > label {
3157
- grid-column: 1;
3158
- }
3159
-
3160
- & > label ~ * {
3161
- grid-column: 2 / span 2;
3162
- }
3163
- }
3164
- }
3165
- }
3166
-
3167
- fig-spinner {
3168
- width: 1rem;
3169
- height: 1rem;
3170
- display: inline-flex;
3171
- background-color: var(--figma-color-icon-tertiary);
3172
- clip-path: path(
3173
- "M15.9995 7.86066C16.0271 9.44267 15.585 10.9973 14.729 12.3281C13.8731 13.6588 12.6417 14.7058 11.1907 15.3368C9.73968 15.9677 8.13415 16.1542 6.57716 15.8726C5.02016 15.591 3.58161 14.8541 2.44344 13.755C1.30526 12.6559 0.518574 11.2439 0.182856 9.69769C-0.152862 8.15147 -0.0225313 6.54042 0.557366 5.06826C1.13726 3.59611 2.14068 2.32898 3.44073 1.4271C4.74079 0.525221 6.27908 0.0291073 7.86109 0.00149397L7.87922 1.04037C6.50268 1.06439 5.16418 1.49607 4.03298 2.28081C2.90177 3.06556 2.02868 4.16812 1.5241 5.44907C1.01952 6.73002 0.906114 8.13183 1.19823 9.47724C1.49034 10.8226 2.17486 12.0512 3.16521 13.0076C4.15556 13.9639 5.40727 14.6052 6.76204 14.8502C8.11682 15.0951 9.51382 14.9329 10.7764 14.3839C12.0389 13.8349 13.1104 12.9239 13.8552 11.766C14.5999 10.6081 14.9846 9.25533 14.9606 7.87879L15.9995 7.86066Z"
3174
- );
3175
- animation: fig-spinner-spin 1s linear infinite;
3176
- }
3177
-
3178
- /* Segmented control */
3179
- .segmented-control,
3180
- fig-segmented-control {
3181
- display: inline-flex;
3182
- user-select: none;
3183
- background-color: var(--figma-color-bg-secondary);
3184
- border: 0;
3185
- border-radius: var(--radius-medium);
3186
- height: 1.5rem;
3187
- padding: 1px;
3188
- gap: 0;
3189
- display: inline-flex;
3190
- align-items: stretch;
3191
-
3192
- & fig-segment {
3193
- flex: 1;
3194
- display: flex;
3195
- align-items: center;
3196
- justify-content: center;
3197
- position: relative;
3198
- appearance: none;
3199
- color: var(--figma-color-text-secondary);
3200
- padding: 0 var(--spacer-2);
3201
-
3202
- &[selected]:not([selected="false"]),
3203
- &[selected="true"] {
3204
- color: var(--figma-color-text);
3205
- background-color: var(--figma-color-bg);
3206
- border-radius: calc(var(--radius-medium) - 1px);
3207
- box-shadow: 0 0 0 1px var(--figma-color-border);
3208
- }
3209
-
3210
- svg {
3211
- *[fill] {
3212
- fill: currentColor;
3213
- }
3214
- *[stroke]:not([stroke="none"]) {
3215
- stroke: currentColor;
3216
- }
3217
- }
3218
- }
3219
-
3220
- &[size="large"] {
3221
- height: var(--spacer-5);
3222
-
3223
- & fig-segment {
3224
- padding: 0 var(--spacer-3);
3225
- }
3226
- }
3227
-
3228
- &[disabled]:not([disabled="false"]) {
3229
- pointer-events: none;
3230
-
3231
- fig-segment {
3232
- color: var(--figma-color-text-disabled);
3233
- background-color: transparent;
3234
- box-shadow: none;
3235
- }
3236
- }
3237
- }
3238
-
3239
- fig-joystick {
3240
- --size: 100%;
3241
- --aspect-ratio: 1 / 1;
3242
- display: flex;
3243
- flex-direction: column;
3244
- gap: var(--spacer-2);
3245
- user-select: none;
3246
- width: var(--size);
3247
-
3248
- /* When inside horizontal fig-field, grow to fill and let inputs expand */
3249
- fig-field[direction="horizontal"] & {
3250
- flex: 1;
3251
- min-width: 0;
3252
-
3253
- fig-input-number {
3254
- flex: 1;
3255
- width: auto;
3256
- }
3257
- }
3258
-
3259
- .joystick-values {
3260
- display: grid;
3261
- grid-template-columns: 1fr 1fr;
3262
- gap: var(--spacer-2);
3263
- }
3264
-
3265
- .joystick-values > fig-input-number {
3266
- width: 100%;
3267
- }
3268
-
3269
- .fig-input-joystick-plane-container {
3270
- display: flex;
3271
- width: 100%;
3272
- aspect-ratio: var(--aspect-ratio);
3273
- place-items: center;
3274
- flex-shrink: 0;
3275
- flex-grow: 0;
3276
- align-items: center;
3277
- justify-content: center;
3278
- position: relative;
3279
- &:focus {
3280
- outline: 0;
3281
- }
3282
- }
3283
-
3284
- .fig-joystick-axis-label {
3285
- position: absolute;
3286
- z-index: 1;
3287
- pointer-events: none;
3288
- user-select: none;
3289
- color: var(--figma-color-text-tertiary);
3290
- font-size: 10px;
3291
- line-height: 1;
3292
- letter-spacing: 0.01em;
3293
- font-weight: 700;
3294
- text-shadow:
3295
- 1px 0 0 var(--figma-color-bg-secondary),
3296
- -1px 0 0 var(--figma-color-bg-secondary),
3297
- 0 1px 0 var(--figma-color-bg-secondary),
3298
- 0 -1px 0 var(--figma-color-bg-secondary);
3299
-
3300
- &.top {
3301
- top: var(--spacer-2);
3302
- left: 50%;
3303
- transform: translateX(-50%);
3304
- }
3305
-
3306
- &.bottom {
3307
- bottom: var(--spacer-2);
3308
- left: 50%;
3309
- transform: translateX(-50%);
3310
- }
3311
-
3312
- &.left {
3313
- left: var(--spacer-2);
3314
- top: 50%;
3315
- transform: translateY(-50%) rotate(-90deg);
3316
- transform-origin: center;
3317
-
3318
- &.no-rotate {
3319
- transform: translateY(-50%);
3320
- }
3321
- }
3322
-
3323
- &.right {
3324
- right: var(--spacer-2);
3325
- top: 50%;
3326
- transform: translateY(-50%) rotate(90deg);
3327
- transform-origin: center;
3328
- }
3329
- }
3330
-
3331
- .fig-input-joystick-plane {
3332
- display: inline-grid;
3333
- place-items: center;
3334
- position: relative;
3335
- width: 100%;
3336
- height: 100%;
3337
- flex-shrink: 0;
3338
- }
3339
- .fig-input-joystick-plane > * {
3340
- grid-area: 1/1;
3341
- }
3342
- .fig-input-joystick-guides {
3343
- position: absolute;
3344
- width: var(--size);
3345
- height: var(--size);
3346
- border-radius: var(--radius-medium);
3347
- overflow: hidden;
3348
- background: var(--figma-color-bg-secondary);
3349
-
3350
- &:before {
3351
- content: "";
3352
- position: absolute;
3353
- height: 0;
3354
- border-left: 1px solid var(--figma-color-border);
3355
- height: calc(100% - 2px);
3356
- top: 1px;
3357
- left: calc(50% - 0.5px);
3358
- pointer-events: none;
3359
- }
3360
- &:after {
3361
- content: "";
3362
- position: absolute;
3363
- height: 0;
3364
- border-top: 1px solid var(--figma-color-border);
3365
- width: calc(100% - 2px);
3366
- top: calc(50% - 0.5px);
3367
- left: 1px;
3368
- pointer-events: none;
3369
- }
3370
- }
3371
- .fig-input-joystick-plane.dragging .fig-input-joystick-guides {
3372
- background:
3373
- linear-gradient(
3374
- 45deg,
3375
- transparent calc(50% - 0.5px),
3376
- var(--figma-color-border) calc(50% - 0.5px),
3377
- var(--figma-color-border) calc(50% + 0.5px),
3378
- transparent calc(50% + 0.5px)
3379
- ),
3380
- linear-gradient(
3381
- -45deg,
3382
- transparent calc(50% - 0.5px),
3383
- var(--figma-color-border) calc(50% - 0.5px),
3384
- var(--figma-color-border) calc(50% + 0.5px),
3385
- transparent calc(50% + 0.5px)
3386
- ),
3387
- var(--figma-color-bg-secondary);
3388
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3389
- }
3390
- .fig-input-joystick-plane-container:focus .fig-input-joystick-guides {
3391
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3392
- }
3393
-
3394
- .fig-input-joystick-handle {
3395
- position: absolute;
3396
- z-index: 2;
3397
- width: 1rem;
3398
- height: 1rem;
3399
- background: var(--figma-color-bg-brand);
3400
- box-shadow:
3401
- inset 0 0 0 0.125rem var(--handle-color),
3402
- 0px 0 0 0.5px rgba(0, 0, 0, 0.1),
3403
- var(--elevation-100-canvas);
3404
- border-radius: 50%;
3405
- transform: translate(-50%, -50%);
3406
- transition: box-shadow var(--slider-transition);
3407
- }
3408
- }
3409
-
3410
- fig-input-angle {
3411
- --size: 1.5rem;
3412
- display: inline-flex;
3413
- gap: var(--spacer-2);
3414
- user-select: none;
3415
-
3416
- /* When inside horizontal fig-field, grow to fill and let inputs expand */
3417
- fig-field[direction="horizontal"] & {
3418
- flex: 1;
3419
- min-width: 0;
3420
-
3421
- fig-input-number {
3422
- flex: 1;
3423
- width: auto;
3424
- }
3425
- }
3426
-
3427
- .fig-input-angle-plane {
3428
- display: inline-grid;
3429
- place-items: center;
3430
- width: var(--size);
3431
- height: var(--size);
3432
- aspect-ratio: 1/1;
3433
- flex-shrink: 0;
3434
- background-color: var(--figma-color-bg-secondary);
3435
- border-radius: 100%;
3436
- box-shadow: inset 0 0 0 1px var(--figma-color-border);
3437
- &:focus,
3438
- &.dragging {
3439
- outline: 0;
3440
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3441
- }
3442
- }
3443
- .fig-input-angle-handle {
3444
- display: inline-grid;
3445
- place-items: center;
3446
- grid-area: 1/1;
3447
- width: calc(0.5rem + 2px);
3448
- height: calc(0.5rem + 2px);
3449
- &::before {
3450
- content: "";
3451
- display: block;
3452
- width: 0.5rem;
3453
- height: 0.5rem;
3454
- background: var(--handle-color);
3455
- box-shadow: var(--handle-shadow);
3456
- border-radius: 50%;
3457
- }
3458
- }
3459
- }
3460
-
3461
- /* Layer */
3462
- fig-layer {
3463
- --indent: var(--spacer-2);
3464
- display: block;
3465
- color: var(--figma-color-text);
3466
- position: relative;
3467
- user-select: none;
3468
- width: 100%;
3469
- border-radius: var(--radius-medium);
3470
-
3471
- /* When layer has children */
3472
- &:has(fig-layer) {
3473
- & > .fig-layer-row {
3474
- & > .fig-layer-chevron {
3475
- visibility: visible;
3476
- }
3477
- }
3478
- }
3479
-
3480
- & > .fig-layer-row {
3481
- display: flex;
3482
- align-items: center;
3483
- gap: var(--spacer-1);
3484
- padding: var(--spacer-1) var(--spacer-2);
3485
- margin-left: 0;
3486
- height: var(--spacer-4);
3487
- border-radius: var(--radius-medium);
3488
- position: relative;
3489
-
3490
- /* Chevron element - injected by JS when layer has children */
3491
- .fig-layer-chevron {
3492
- mask-image: var(--icon-chevron);
3493
- mask-size: contain;
3494
- mask-repeat: no-repeat;
3495
- mask-position: center;
3496
- display: flex;
3497
- visibility: hidden;
3498
- background: var(--figma-color-text-tertiary);
3499
- width: var(--spacer-3);
3500
- height: var(--spacer-3);
3501
- flex-shrink: 0;
3502
- transition: transform 0.15s;
3503
- position: absolute;
3504
- left: calc(var(--spacer-3) * -1);
3505
- top: var(--spacer-1);
3506
- rotate: -90deg;
3507
- }
3508
-
3509
- &:hover {
3510
- background: var(--figma-color-bg-secondary);
3511
-
3512
- .fig-layer-actions {
3513
- opacity: 1;
3514
- }
3515
- }
3516
-
3517
- /* Layer icon */
3518
- .fig-layer-icon {
3519
- flex-shrink: 0;
3520
- width: var(--spacer-3);
3521
- height: var(--spacer-3);
3522
- color: var(--figma-color-icon-tertiary);
3523
- margin-left: calc(var(--spacer-1) * -1);
3524
- }
3525
-
3526
- > label {
3527
- flex: 1;
3528
- min-width: 0;
3529
- overflow: hidden;
3530
- text-overflow: ellipsis;
3531
- white-space: nowrap;
3532
- color: var(--figma-color-text);
3533
- }
3534
- }
3535
-
3536
- .fig-layer-actions {
3537
- display: flex;
3538
- margin-right: calc(-1 * var(--spacer-1));
3539
- gap: 0;
3540
- opacity: 0;
3541
- transition: opacity 0.15s;
3542
- flex-shrink: 0;
3543
-
3544
- > * {
3545
- flex-shrink: 0;
3546
- }
3547
- }
3548
-
3549
- /* Nested layers indentation */
3550
- > fig-layer {
3551
- padding-left: var(--indent);
3552
- margin-top: 1px;
3553
- }
3554
-
3555
- /* Collapsed state - hide children */
3556
- &:not([open]) > fig-layer,
3557
- &[open="false"] > fig-layer {
3558
- display: none;
3559
- }
3560
-
3561
- &[open]:not([open="false"]) {
3562
- /* Rotate chevron when open */
3563
- & > .fig-layer-row > .fig-layer-chevron {
3564
- rotate: 0deg;
3565
- }
3566
- }
3567
-
3568
- /* Dimmed when not visible */
3569
- &[visible="false"] > .fig-layer-row {
3570
- & > label {
3571
- color: var(--figma-color-text-tertiary);
3572
- }
3573
- }
3574
-
3575
- /* Selected state */
3576
- &[selected]:not([selected="false"]) {
3577
- /* Open with children */
3578
- /*&:has(fig-layer) {
3579
- background: var(--figma-color-bg-selected-secondary);
3580
- }*/
3581
- & > .fig-layer-row {
3582
- background: var(--figma-color-bg-selected);
3583
- & > .fig-layer-icon {
3584
- color: var(--figma-color-icon);
3585
- }
3586
- }
3587
- }
3588
- }
3589
-
3590
- /* Shimmer */
3591
- fig-shimmer {
3592
- display: contents;
3593
- --shimmer-angle: 90deg;
3594
- --shimmer-size: 250% 100%;
3595
- --shimmer-duration: 1.5s;
3596
-
3597
- &[direction="vertical"] {
3598
- --shimmer-angle: 180deg;
3599
- --shimmer-size: 100% 250%;
3600
- }
3601
- &[direction="diagonal"] {
3602
- --shimmer-angle: 135deg;
3603
- --shimmer-size: 250% 250%;
3604
- }
3605
-
3606
- /* When not playing, remove shimmer effect entirely */
3607
- &[playing="false"] > * {
3608
- background: none;
3609
- -webkit-background-clip: unset;
3610
- background-clip: unset;
3611
- -webkit-text-fill-color: unset;
3612
- animation: none;
3613
- }
3614
- }
3615
-
3616
- /* Only apply shimmer when playing (default) or playing="true" */
3617
- fig-shimmer:not([playing="false"]) > * {
3618
- background: linear-gradient(
3619
- var(--shimmer-angle),
3620
- var(--figma-color-text-tertiary) 0%,
3621
- var(--figma-color-text-tertiary) 40%,
3622
- var(--figma-color-text) 50%,
3623
- var(--figma-color-text-tertiary) 60%,
3624
- var(--figma-color-text-tertiary) 100%
3625
- );
3626
- background-size: var(--shimmer-size);
3627
- -webkit-background-clip: text;
3628
- background-clip: text;
3629
- -webkit-text-fill-color: transparent;
3630
- animation: fig-shimmer var(--shimmer-duration) linear infinite;
3631
- }
3632
-
3633
- /* Fill Picker */
3634
- fig-fill-picker {
3635
- display: contents;
3636
-
3637
- > [slot^="mode-"] {
3638
- display: none;
3639
- }
3640
- }
3641
-
3642
- .fig-fill-picker-dialog {
3643
- width: 240px;
3644
- padding: 0;
3645
-
3646
- fig-header {
3647
- padding: var(--spacer-2);
3648
- display: flex;
3649
- justify-content: space-between;
3650
- align-items: center;
3651
- }
3652
-
3653
- fig-tab {
3654
- font-size: 0.6875rem;
3655
- padding: var(--spacer-1) var(--spacer-1);
3656
- }
3657
- }
3658
-
3659
- .fig-fill-picker-type-label {
3660
- font-size: var(--font-size-small);
3661
- font-weight: var(--font-weight-medium);
3662
- color: var(--figma-color-text);
3663
- padding: var(--spacer-1) var(--spacer-2);
3664
- }
3665
-
3666
- .fig-fill-picker-content {
3667
- padding: var(--spacer-3);
3668
- }
3669
-
3670
- .fig-fill-picker-tab {
3671
- display: none;
3672
-
3673
- &:first-child {
3674
- display: block;
3675
- }
3676
- }
3677
-
3678
- /* Solid Tab */
3679
- .fig-fill-picker-color-area {
3680
- position: relative;
3681
- width: 100%;
3682
- aspect-ratio: 1;
3683
- border-radius: var(--radius-medium);
3684
- overflow: visible;
3685
- margin-bottom: var(--spacer-2);
3686
-
3687
- canvas {
3688
- width: 100%;
3689
- height: 100%;
3690
- border-radius: var(--radius-medium);
3691
- }
3692
- }
3693
-
3694
- .fig-fill-picker-handle {
3695
- position: absolute;
3696
- width: 1rem;
3697
- height: 1rem;
3698
- border-radius: 50%;
3699
- background: var(--picker-color);
3700
- box-shadow:
3701
- inset 0 0 0 0.125rem var(--handle-color),
3702
- 0px 0 0 0.5px rgba(0, 0, 0, 0.1),
3703
- var(--elevation-100-canvas);
3704
- transform: translate(-50%, -50%);
3705
- z-index: 1;
3706
- &:hover {
3707
- transform: translate(-50%, -50%);
3708
- }
3709
- }
3710
-
3711
- .fig-fill-picker-sliders {
3712
- display: flex;
3713
- flex-direction: column;
3714
- gap: var(--spacer-2);
3715
- margin-bottom: var(--spacer-2);
3716
-
3717
- fig-slider {
3718
- width: 100%;
3719
- }
3720
- }
3721
-
3722
- .fig-fill-picker-inputs {
3723
- display: flex;
3724
- gap: var(--spacer-1);
3725
- align-items: center;
3726
-
3727
- .fig-fill-picker-color-input {
3728
- flex: 1;
3729
- }
3730
- }
3731
-
3732
- /* Gradient Tab */
3733
- .fig-fill-picker-gradient-header {
3734
- display: flex;
3735
- gap: var(--spacer-2);
3736
- align-items: center;
3737
- margin-bottom: var(--spacer-2);
3738
-
3739
- & > *:last-child fig-button {
3740
- margin-left: auto;
3741
- }
3742
-
3743
- .fig-fill-picker-gradient-center {
3744
- fig-input-number {
3745
- width: 48px;
3746
- }
3747
- }
3748
- }
3749
-
3750
- .fig-fill-picker-gradient-preview {
3751
- position: relative;
3752
- width: 100%;
3753
- aspect-ratio: 1;
3754
- border-radius: var(--radius-medium);
3755
- overflow: hidden;
3756
- margin-bottom: var(--spacer-2);
3757
- }
3758
-
3759
- .fig-fill-picker-gradient-bar {
3760
- position: absolute;
3761
- inset: 0;
3762
- border-radius: var(--radius-medium);
3763
- background: linear-gradient(90deg, #d9d9d9 0%, #737373 100%);
3764
- }
3765
-
3766
- .fig-fill-picker-gradient-stops-handles {
3767
- position: absolute;
3768
- top: 0;
3769
- left: 0;
3770
- right: 0;
3771
- bottom: 0;
3772
- pointer-events: none;
3773
- }
3774
-
3775
- .fig-fill-picker-gradient-stops {
3776
- .fig-fill-picker-gradient-stops-header {
3777
- display: flex;
3778
- justify-content: space-between;
3779
- align-items: center;
3780
- margin-bottom: var(--spacer-1);
3781
- font-size: 0.75rem;
3782
- color: var(--figma-color-text-secondary);
3783
- }
3784
- }
3785
-
3786
- .fig-fill-picker-gradient-stops-list {
3787
- display: flex;
3788
- flex-direction: column;
3789
- gap: var(--spacer-1);
3790
- }
3791
-
3792
- .fig-fill-picker-gradient-stop-row {
3793
- display: flex;
3794
- gap: var(--spacer-1);
3795
- align-items: center;
3796
-
3797
- & > .fig-fill-picker-stop-position {
3798
- flex: 0;
3799
- flex-basis: 3rem;
3800
- min-width: 0;
3801
- width: 3rem;
3802
- }
3803
-
3804
- .fig-fill-picker-stop-color {
3805
- flex: 1;
3806
- min-width: 0;
3807
- fig-input-text {
3808
- min-width: 0;
3809
- }
3810
- }
3811
-
3812
- .fig-fill-picker-stop-remove {
3813
- flex-shrink: 0;
3814
- }
3815
- }
3816
-
3817
- /* Media Tabs (Image/Video/Webcam) */
3818
- .fig-fill-picker-media-header {
3819
- display: flex;
3820
- gap: var(--spacer-1);
3821
- align-items: center;
3822
- margin-bottom: var(--spacer-2);
3823
-
3824
- .fig-fill-picker-scale-mode {
3825
- flex: 1;
3826
- }
3827
-
3828
- .fig-fill-picker-scale {
3829
- width: 56px;
3830
- }
3831
- }
3832
-
3833
- .fig-fill-picker-media-preview {
3834
- position: relative;
3835
- aspect-ratio: 1;
3836
- border-radius: var(--radius-medium);
3837
- overflow: hidden;
3838
- display: flex;
3839
- align-items: center;
3840
- justify-content: center;
3841
-
3842
- &.dragover {
3843
- outline: 2px dashed var(--figma-color-border-brand);
3844
- outline-offset: -2px;
3845
- }
3846
-
3847
- &.has-media {
3848
- fig-button {
3849
- visibility: hidden;
3850
- }
3851
- &:hover {
3852
- fig-button {
3853
- visibility: visible;
3854
- }
3855
- }
3856
- }
3857
- }
3858
-
3859
- .fig-fill-picker-checkerboard {
3860
- position: absolute;
3861
- inset: 0;
3862
- background-image:
3863
- linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
3864
- linear-gradient(
3865
- -45deg,
3866
- var(--figma-color-bg-tertiary) 25%,
3867
- transparent 25%
3868
- ),
3869
- linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%),
3870
- linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);
3871
- background-size: 16px 16px;
3872
- background-position:
3873
- 0 0,
3874
- 0 8px,
3875
- 8px -8px,
3876
- -8px 0px;
3877
- }
3878
-
3879
- .fig-fill-picker-image-preview {
3880
- position: absolute;
3881
- inset: 0;
3882
- width: 100%;
3883
- height: 100%;
3884
- display: none;
3885
- }
3886
-
3887
- .fig-fill-picker-video-preview {
3888
- position: absolute;
3889
- inset: 0;
3890
- width: 100%;
3891
- height: 100%;
3892
- object-fit: cover;
3893
- display: none;
3894
- }
3895
-
3896
- .fig-fill-picker-upload {
3897
- position: relative;
3898
- z-index: 1;
3899
- }
3900
-
3901
- /* Webcam Tab */
3902
- .fig-fill-picker-webcam-preview {
3903
- position: relative;
3904
- aspect-ratio: 1;
3905
- border-radius: var(--radius-medium);
3906
- overflow: hidden;
3907
- margin-bottom: var(--spacer-2);
3908
- }
3909
-
3910
- .fig-fill-picker-webcam-video {
3911
- position: absolute;
3912
- inset: 0;
3913
- width: 100%;
3914
- height: 100%;
3915
- object-fit: cover;
3916
- }
3917
-
3918
- .fig-fill-picker-webcam-status {
3919
- position: absolute;
3920
- inset: 0;
3921
- display: flex;
3922
- align-items: center;
3923
- justify-content: center;
3924
- background: var(--figma-color-bg-secondary);
3925
- color: var(--figma-color-text-secondary);
3926
- font-size: 0.75rem;
3927
- }
3928
-
3929
- .fig-fill-picker-webcam-controls {
3930
- display: flex;
3931
- gap: var(--spacer-1);
3932
-
3933
- .fig-fill-picker-camera-select {
3934
- flex: 1;
3935
- }
3936
-
3937
- .fig-fill-picker-webcam-capture {
3938
- flex-shrink: 0;
3939
- }
3940
- }
3941
-
3942
- /* Utilities */
3943
-
3944
- .fig-mask-icon {
3945
- --size: var(--spacer-4);
3946
- --icon: var(--icon-add);
3947
- display: inline-flex;
3948
- width: var(--size);
3949
- height: var(--size);
3950
- background: currentColor;
3951
- mask-image: var(--icon);
3952
- mask-size: contain;
3953
- mask-repeat: no-repeat;
3954
- mask-position: center;
3955
- -webkit-mask-image: var(--icon);
3956
- -webkit-mask-size: contain;
3957
- -webkit-mask-repeat: no-repeat;
3958
- -webkit-mask-position: center;
3959
- }
3960
-
3961
- @keyframes fig-spinner-spin {
3962
- from {
3963
- transform: rotate(0deg);
3964
- }
3965
-
3966
- to {
3967
- transform: rotate(360deg);
3968
- }
3969
- }
3970
-
3971
- @keyframes fig-shimmer {
3972
- 0% {
3973
- background-position: 100% 100%;
3974
- }
3975
- 100% {
3976
- background-position: 0% 0%;
3977
- }
3978
- }
1
+ :root,:host{color-scheme:light dark;--figma-color-bg:light-dark(#fff,#2c2c2c);--figma-color-bg-brand:light-dark(#0d99ff,#0c8ce9);--figma-color-bg-menu:#1e1e1e;--figma-color-bg-menu-hover:#0c8ce9;--figma-color-bg-brand-hover:light-dark(#007be5,#0a6dc2);--figma-color-bg-brand-pressed:light-dark(#0768cf,#105cad);--figma-color-bg-brand-secondary:light-dark(#0768cf,#105cad);--figma-color-bg-brand-tertiary:light-dark(#e5f4ff,#394360);--figma-color-bg-component:light-dark(#9747ff,#8a38f5);--figma-color-bg-component-hover:light-dark(#8638e5,#7a2ed6);--figma-color-bg-component-pressed:light-dark(#8638e5,#7a2ed6);--figma-color-bg-component-secondary:light-dark(#7c2bda,#652ca8);--figma-color-bg-component-tertiary:light-dark(#f1e5ff,#473956);--figma-color-bg-danger:light-dark(#f24822,#e03e1a);--figma-color-bg-danger-hover:light-dark(#dc3412,#c4381c);--figma-color-bg-danger-pressed:light-dark(#dc3412,#c4381c);--figma-color-bg-danger-secondary:light-dark(#bd2915,#963323);--figma-color-bg-danger-tertiary:light-dark(#ffe2e0,#60332a);--figma-color-bg-disabled:light-dark(#d9d9d9,#757575);--figma-color-bg-disabled-secondary:#b3b3b3;--figma-color-bg-hover:light-dark(#f5f5f5,#383838);--figma-color-bg-inverse:light-dark(#2c2c2c,#fff);--figma-color-bg-onselected:light-dark(#bde3ff,#679);--figma-color-bg-onselected-hover:light-dark(#bde3ff,#679);--figma-color-bg-onselected-pressed:light-dark(#bde3ff,#679);--figma-color-bg-pressed:light-dark(#f5f5f5,#383838);--figma-color-bg-secondary:light-dark(#f5f5f5,#383838);--figma-color-bg-selected:light-dark(#e5f4ff,#4a5878);--figma-color-bg-selected-hover:light-dark(#bde3ff,#536383);--figma-color-bg-selected-pressed:light-dark(#bde3ff,#536383);--figma-color-bg-selected-secondary:light-dark(#f2f9ff,#394360);--figma-color-bg-selected-strong:light-dark(#0d99ff,#0c8ce9);--figma-color-bg-selected-tertiary:light-dark(#f2f9ff,#394360);--figma-color-bg-success:light-dark(#14ae5c,#198f51);--figma-color-bg-success-hover:light-dark(#009951,#078348);--figma-color-bg-success-pressed:light-dark(#009951,#078348);--figma-color-bg-success-secondary:light-dark(#008043,#0a5c35);--figma-color-bg-success-tertiary:light-dark(#cff7d3,#476656);--figma-color-bg-tertiary:light-dark(#e6e6e6,#444);--figma-color-bg-warning:light-dark(#ffcd29,#f3c11b);--figma-color-bg-warning-hover:light-dark(#ffc21a,#f2b50d);--figma-color-bg-warning-pressed:light-dark(#ffc21a,#f2b50d);--figma-color-bg-warning-secondary:light-dark(#fab815,#e4a711);--figma-color-bg-warning-tertiary:light-dark(#fff1c2,#5c4100);--figma-color-bg-switch:light-dark(#e6e6e6,#444);--figma-color-border:light-dark(#e6e6e6,#444);--figma-color-border-brand:light-dark(#bde3ff,#105cad);--figma-color-border-brand-strong:light-dark(#007be5,#7cc4f8);--figma-color-border-component:light-dark(#e4ccff,#652ca8);--figma-color-border-component-hover:light-dark(#9747ff,#8a38f5);--figma-color-border-component-strong:light-dark(#8638e5,#d6b6fb);--figma-color-border-danger:light-dark(#ffc7c2,#963323);--figma-color-border-danger-strong:light-dark(#dc3412,#fca397);--figma-color-border-disabled:light-dark(#e6e6e6,#444);--figma-color-border-disabled-strong:light-dark(#0000004d,#fff6);--figma-color-border-menu:#383838;--figma-color-border-onbrand:light-dark(#007be5,#0a6dc2);--figma-color-border-onbrand-strong:#fff;--figma-color-border-oncomponent:light-dark(#8638e5,#7a2ed6);--figma-color-border-oncomponent-strong:#fff;--figma-color-border-ondanger:light-dark(#dc3412,#c4381c);--figma-color-border-ondanger-strong:#fff;--figma-color-border-onselected:light-dark(#bde3ff,#679);--figma-color-border-onselected-strong:light-dark(#000000e5,#ffffffe5);--figma-color-border-onsuccess:light-dark(#009951,#078348);--figma-color-border-onsuccess-strong:#fff;--figma-color-border-onwarning:light-dark(#fab815,#e4a711);--figma-color-border-onwarning-strong:#000000e5;--figma-color-border-selected:light-dark(#0d99ff,#0c8ce9);--figma-color-border-selected-strong:light-dark(#007be5,#7cc4f8);--figma-color-border-strong:light-dark(#2c2c2c,#ffffffe5);--figma-color-border-success:light-dark(#aff4c6,#0a5c35);--figma-color-border-success-strong:light-dark(#009951,#79d297);--figma-color-border-warning:light-dark(#ffe8a3,#925711);--figma-color-border-warning-strong:light-dark(#b86200,#f7d15f);--figma-color-icon:light-dark(#000000e5,#fff);--figma-color-icon-brand:light-dark(#007be5,#7cc4f8);--figma-color-icon-brand-pressed:light-dark(#0768cf,#0c8ce9);--figma-color-icon-brand-secondary:light-dark(#80caff,#0a6dc2);--figma-color-icon-brand-tertiary:light-dark(#bde3ff,#394360);--figma-color-icon-component:light-dark(#8638e5,#d1a8ff);--figma-color-icon-component-pressed:light-dark(#7c2bda,#d6b6fb);--figma-color-icon-component-secondary:light-dark(#c5b2dc,#7f699b);--figma-color-icon-component-tertiary:light-dark(#c5b2dc,#7f699b);--figma-color-icon-danger:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-hover:light-dark(#bd2915,#fbbcb6);--figma-color-icon-danger-pressed:light-dark(#bd2915,#fbbcb6);--figma-color-icon-danger-secondary:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-secondary-hover:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-tertiary:light-dark(#f24822,#e03e1a);--figma-color-icon-disabled:light-dark(#0000004d,#fff6);--figma-color-icon-hover:light-dark(#000000e5,#fff);--figma-color-icon-onbrand:#fff;--figma-color-icon-onbrand-secondary:#fffc;--figma-color-icon-onbrand-tertiary:#fff6;--figma-color-icon-oncomponent:#fff;--figma-color-icon-oncomponent-secondary:#fffc;--figma-color-icon-oncomponent-tertiary:#fff6;--figma-color-icon-ondanger:#fff;--figma-color-icon-ondanger-secondary:#fffc;--figma-color-icon-ondanger-tertiary:#fff6;--figma-color-icon-ondisabled:light-dark(#fff,#2c2c2c);--figma-color-icon-oninverse:light-dark(#ffffffe5,#000000e5);--figma-color-icon-onselected:light-dark(#000000e5,#fff);--figma-color-icon-onselected-secondary:light-dark(#00000080,#ffffffb2);--figma-color-icon-onselected-strong:#fff;--figma-color-icon-onselected-tertiary:light-dark(#0000004d,#fff6);--figma-color-icon-onsuccess:#fff;--figma-color-icon-onsuccess-secondary:#fffc;--figma-color-icon-onsuccess-tertiary:#fff6;--figma-color-icon-onwarning:#000000e5;--figma-color-icon-onwarning-secondary:#00000080;--figma-color-icon-onwarning-tertiary:#0000004d;--figma-color-icon-pressed:light-dark(#007be5,#0a6dc2);--figma-color-icon-secondary:light-dark(#00000080,#ffffffb2);--figma-color-icon-secondary-hover:light-dark(#000000e5,#fff);--figma-color-icon-selected:light-dark(#007be5,#7cc4f8);--figma-color-icon-selected-secondary:light-dark(#007be5,#7cc4f8);--figma-color-icon-selected-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-icon-success:light-dark(#14ae5c,#198f51);--figma-color-icon-success-pressed:light-dark(#008043,#a1e8b9);--figma-color-icon-success-secondary:light-dark(#14ae5c,#198f51);--figma-color-icon-success-tertiary:light-dark(#14ae5c,#198f51);--figma-color-icon-tertiary:light-dark(#0000004d,#fff6);--figma-color-icon-tertiary-hover:light-dark(#000000e5,#fff);--figma-color-icon-warning:light-dark(#ffcd29,#f3c11b);--figma-color-icon-warning-pressed:light-dark(#b86200,#f7d15f);--figma-color-icon-warning-secondary:light-dark(#ffcd29,#f3c11b);--figma-color-icon-warning-tertiary:light-dark(#ffcd29,#f3c11b);--figma-color-text:light-dark(#000000e5,#fff);--figma-color-text-brand:light-dark(#007be5,#7cc4f8);--figma-color-text-brand-secondary:light-dark(#007be5,#7cc4f8);--figma-color-text-brand-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-text-component:light-dark(#8638e5,#d1a8ff);--figma-color-text-component-pressed:light-dark(#7c2bda,#d6b6fb);--figma-color-text-component-secondary:light-dark(#c5b2dc,#7f699b);--figma-color-text-component-tertiary:light-dark(#c5b2dc,#7f699b);--figma-color-text-danger:light-dark(#dc3412,#fca397);--figma-color-text-danger-secondary:light-dark(#dc3412,#fca397);--figma-color-text-danger-tertiary:light-dark(#dc3412,#fca397);--figma-color-text-disabled:light-dark(#0000004d,#fff6);--figma-color-text-hover:light-dark(#000000e5,#fff);--figma-color-text-onbrand:#fff;--figma-color-text-onbrand-secondary:#fffc;--figma-color-text-onbrand-tertiary:#fff6;--figma-color-text-oncomponent:#fff;--figma-color-text-oncomponent-secondary:#fffc;--figma-color-text-oncomponent-tertiary:#fff6;--figma-color-text-ondanger:#fff;--figma-color-text-ondanger-secondary:#fffc;--figma-color-text-ondanger-tertiary:#fff6;--figma-color-text-ondisabled:light-dark(#fff,#2c2c2c);--figma-color-text-oninverse:light-dark(#ffffffe5,#000000e5);--figma-color-text-onselected:light-dark(#000000e5,#ffffffe5);--figma-color-text-onselected-secondary:light-dark(#00000080,#ffffffb2);--figma-color-text-onselected-strong:#fff;--figma-color-text-onselected-tertiary:light-dark(#0000004d,#fff6);--figma-color-text-onsuccess:#fff;--figma-color-text-onsuccess-secondary:#fffc;--figma-color-text-onsuccess-tertiary:#fff6;--figma-color-text-onwarning:#000000e5;--figma-color-text-onwarning-secondary:#00000080;--figma-color-text-onwarning-tertiary:#0000004d;--figma-color-text-secondary:light-dark(#00000080,#ffffffb2);--figma-color-text-secondary-hover:light-dark(#000000e5,#fff);--figma-color-text-selection:#0d99ff66;--figma-color-text-selected:light-dark(#007be5,#7cc4f8);--figma-color-text-selected-secondary:light-dark(#007be5,#7cc4f8);--figma-color-text-selected-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-text-success:light-dark(#009951,#79d297);--figma-color-text-success-secondary:light-dark(#009951,#79d297);--figma-color-text-success-tertiary:light-dark(#009951,#79d297);--figma-color-text-tertiary:light-dark(#0000004d,#fff6);--figma-color-text-tertiary-hover:light-dark(#000000e5,#fff);--figma-color-text-warning:light-dark(#b86200,#f7d15f);--figma-color-text-warning-secondary:light-dark(#b86200,#f7d15f);--figma-color-text-warning-tertiary:light-dark(#b86200,#f7d15f);--figma-color-text-menu:#fff;--figma-color-text-menu-secondary:#ffffffb3;--figma-color-text-menu-tertiary:#fff6;--font-size:16px;--font-family:"Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--body-medium-fontSize:.6875rem;--body-large-fontSize:.8125rem;--body-letter-spacing:.055px;--body-medium-strong-fontWeight:550;--body-large-strong-fontWeight:500;--body-medium-fontWeight:450;--spacer-1:.25rem;--spacer-2:.5rem;--spacer-2-5:.75rem;--spacer-3:1rem;--spacer-4:1.5rem;--spacer-5:2rem;--spacer-6:2.5rem;--radius-none:0;--radius-small:.125rem;--radius-medium:.3125rem;--radius-large:.8125rem;--figma-radius-none:var(--radius-none);--figma-radius-small:var(--radius-small);--figma-radius-medium:var(--radius-medium);--figma-radius-large:var(--radius-large);--input-transition:all 80ms ease-out;--popover-min-width:15rem;--handle-color:#fff;--bg-selected:#f5f5f5;--bg-selected-active:#e5f4ff;--bg-tooltip:#1e1e1e;--color-tooltip:#fff;--figma-color-bordertranslucent:light-dark(#0000001a,#ffffff1a);--figma-color-bg-transparent:light-dark(#0000000d,#ffffff0d);--figma-color-bg-transparent-hover:light-dark(#0000000d,#ffffff0d);--figma-color-bg-transparent-pressed:light-dark(#0000001a,#ffffff1a);--figma-color-bg-transparent-secondary:light-dark(#0003,#fff3);--eased-fade-stops:var(--figma-color-bg) 0%, color-mix(in oklch, var(--figma-color-bg) 99.9%, transparent) 10%, color-mix(in oklch, var(--figma-color-bg) 99.2%, transparent) 20%, color-mix(in oklch, var(--figma-color-bg) 97.3%, transparent) 30%, color-mix(in oklch, var(--figma-color-bg) 93.6%, transparent) 40%, color-mix(in oklch, var(--figma-color-bg) 87.5%, transparent) 50%, color-mix(in oklch, var(--figma-color-bg) 78.4%, transparent) 60%, color-mix(in oklch, var(--figma-color-bg) 65.7%, transparent) 70%, color-mix(in oklch, var(--figma-color-bg) 48.8%, transparent) 80%, color-mix(in oklch, var(--figma-color-bg) 27.1%, transparent) 90%, transparent 100%;--checkerboard:repeating-conic-gradient(#0000001a 0% 25%, #ffffff1a 0% 50%) 0 0 / .66666rem .66666rem;--bg-hue:linear-gradient(90deg, red, #ff3000, #ff6000, #ff8f00, #ffbf00, #ffef00, #dfff00, #afff00, #80ff00, #50ff00, #20ff00, #00ff10, #00ff40, #00ff70, #00ff9f, #00ffcf, #0ff, #00cfff, #009fff, #0070ff, #0040ff, #0010ff, #2000ff, #5000ff, #7f00ff, #af00ff, #df00ff, #ff00ef, #ff00bf, #ff008f, #ff0060, #ff0030);--icon-chevron:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");--icon-checkmark:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");--icon-reset:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");--icon-steppers:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");--icon-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");--icon-add:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");--icon-back:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");--icon-arrow-left:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--icon-forward:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");--icon-close:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");--icon-rotate:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");--icon-swap:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");--tip-pointer:path("M3 3L0 0H6L3 3Z");--figma-elevation-100:0px 0px .5px 0px light-dark(#0000004d,#00000080), inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a), 0px 1px 3px 0px light-dark(#00000026,#0006);--figma-elevation-200:0px 0px .5px 0px light-dark(#0000002e,#0000), 0px 3px 8px 0px light-dark(#0000001a,#00000059), 0px 1px 3px 0px light-dark(#0000001a,#00000080), inset 0px .5px 0px 0px light-dark(#0000,#ffffff14), inset 0px 0px .5px 0px light-dark(#0000,#ffffff4d);--elevation-100-canvas:0 0 .5px 0 light-dark(#0000004d,#00000080), 0 .5px 0 0 light-dark(#0000,#ffffff1a) inset, 0 0 .5px 0 light-dark(#0000,#ffffff4d) inset, 0 1px 3px 0 light-dark(#00000026,#0006);--figma-elevation-400-menu-panel:0px 0px .5px 0px light-dark(#0000001f,#0000), 0px 10px 16px 0px light-dark(#0000001f,#00000059), 0px 2px 5px 0px light-dark(#00000026,#00000059), inset 0px .5px 0px 0px light-dark(#0000,#ffffff14), inset 0px .75px 0px 0px light-dark(#0000,#ffffff13);--figma-elevation-500-modal-window:0px 0px .5px 0px light-dark(#00000014,#0000), 0px 10px 24px 0px light-dark(#0000002e,#00000073), 0px 2px 5px 0px light-dark(#00000026,#0000), 0px 3px 5px 0px light-dark(#0000,#00000059), inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--handle-shadow:0px 0px 0px .5px #0000001a, 0px 0px .5px 0px light-dark(#0000004d,#ffffff1a), 0px 1px 3px 0px light-dark(#00000026,#0000)}button,select,input,fieldset{font:inherit;align-items:center;gap:.25rem;margin:0;line-height:1rem;display:inline-flex}textarea,input[type=text],input[type=number],input[type=password],input[type=url],input[type=email],input[type=search],input[type=tel],.input{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);padding:var(--spacer-1) var(--spacer-2);box-sizing:content-box;resize:none;min-width:0;font:inherit;color:inherit;-moz-appearance:textfield;appearance:textfield;border:0;display:flex;line-height:1rem!important;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{color-scheme:inherit;-webkit-appearance:none;margin:0;display:none}}fig-input-number .fig-steppers{border-radius:0 var(--radius-medium) var(--radius-medium) 0;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden;& button{appearance:none;background-color:var(--figma-color-text-secondary);cursor:pointer;border:0;flex:1;width:1.5rem;margin:0;padding:0;display:block;mask-position:50% -3.5px;mask-size:1rem;mask-repeat:no-repeat;&:hover{background-color:var(--figma-color-text)}&:active{background-color:var(--figma-color-text-tertiary)}}fig-input-number[disabled]:not([disabled=false]) & button{pointer-events:none;background-color:var(--figma-color-text-disabled)}& .fig-stepper-up{mask-image:var(--icon-chevron);rotate:180deg}& .fig-stepper-down{mask-image:var(--icon-chevron)}}textarea{box-sizing:border-box;width:100%;min-height:2rem;display:block}select,input[type=text][list]{height:var(--spacer-4);padding:0 calc(var(--spacer-2) - 1px);border-radius:var(--radius-medium);appearance:none;color:var(--figma-color-text);background-color:var(--figma-color-bg);box-shadow:inset 0 0 0 1px var(--figma-color-border);accent-color:var(--figma-color-bg-brand);white-space:nowrap;text-overflow:ellipsis;border:0;flex:1 0 0;align-items:center;display:flex;overflow:hidden;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-calendar-picker-indicator{color-scheme:inherit;opacity:0}}@supports (appearance:base-select){fig-dropdown[experimental~=modern]{&[type=dropdown]{& select:before{content:attr(aria-label)}& option::checkmark{display:none}& option{padding-left:var(--spacer-3)}}& select{--option-height:1.5rem;--max-width:20rem;@media (hover) and (pointer:fine){&,&::picker(select){appearance:base-select}}will-change:scale;padding-block:0;@supports (-webkit-touch-callout:none){font-size:16px}& option::checkmark{content:"";width:1rem;height:1rem;-webkit-mask-image:var(--icon-checkmark);mask-image:var(--icon-checkmark);background-color:currentColor;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}& option{gap:var(--spacer-1);padding:0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));font-weight:var(--body-medium-fontWeight);color:var(--figma-color-text-menu);display:flex;position:relative;& *{color:inherit}&[hidden]{display:none}&:before{content:"";inset:0 var(--spacer-2);border-radius:var(--radius-medium);z-index:-1;display:block;position:absolute}&:checked:before,&:not(:checked):before{background-color:#0000}&:not(:disabled){&:hover,&:active,&:focus-visible{background-color:#0000;outline:0;&:before{background-color:var(--figma-color-bg-menu-hover)}}}}& optgroup{color:var(--figma-color-text-menu-secondary);text-align:left;padding:0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));font-weight:var(--body-medium-fontWeight);position:relative;&[label]:not([label=""]){padding-top:var(--spacer-2);& option:first-child{margin-top:var(--spacer-2)}}& legend{padding:var(--spacer-1,.3rem) var(--spacer-1,1rem)}& option{margin:0 calc(var(--spacer-1) * -1);margin-left:calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1)}&:not(:first-child):not(:first-of-type){margin-top:var(--spacer-2);padding-top:var(--spacer-3);&:before{content:"";background-color:var(--figma-color-border-menu);height:1px;margin-bottom:var(--spacer-2);display:block;position:absolute;top:1px;left:0;right:0}}}& option[hidden=true]:first-child+optgroup{padding-top:var(--spacer-2);margin-top:0;&:before{display:none}}&:has(>button){padding-left:0}&>button{align-items:center;gap:var(--spacer-1);width:100%;color:inherit;font:inherit;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;height:100%;margin:0;padding:0;display:flex;overflow:hidden;&>selectedcontent{align-items:center;gap:0;min-width:0;display:flex;&:not(:has(>svg)){padding-left:var(--spacer-2)}& svg{flex-shrink:0}}}}& ::picker-icon{display:none}& ::picker(select){appearance:base-select;color-scheme:dark;scrollbar-width:thin;scrollbar-color:var(--figma-color-text-menu-tertiary) var(--figma-color-bg-menu);border-radius:var(--radius-large);background-color:var(--figma-color-bg-menu);padding:var(--spacer-2) 0;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0}}}input[type=text][list],select{padding-right:var(--spacer-4);padding-left:var(--spacer-2)}fig-dropdown,.fig-dropdown{display:inline-flex;position:relative;&>:not(select){display:none!important}&>select{flex:1;align-items:center;width:100%;display:flex}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-chevron);background-color:var(--figma-color-icon);pointer-events:none;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}&[autoresize] select{field-sizing:content}}.fig-button,fig-button{color:var(--figma-color-text-onbrand);height:var(--spacer-4);padding:0 var(--spacer-2);appearance:none;border-radius:var(--radius-medium);background-color:var(--figma-color-bg-brand);border:0;outline:0;justify-content:center;align-items:center;min-width:0;font-weight:500;display:flex;&:active{background-color:var(--figma-color-bg-brand-pressed)}&:hover{background-color:var(--figma-color-bg-brand-hover);&:active{background-color:var(--figma-color-bg-brand-pressed);color:var(--figma-color-text-onbrand-secondary)}}&[variant=link]{box-shadow:none;color:var(--figma-color-text-brand);background:0 0;&:hover:not(:active){background-color:#0000}&:active{background-color:var(--figma-color-bg-selected);color:var(--figma-color-text-brand);outline:0}}&[variant=ghost]{box-shadow:none;color:var(--figma-color-text);background:0 0;&:hover:not(:active){background-color:var(--figma-color-bg-transparent-hover)}&:active{background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text);outline:0}}&[variant=ghost][disabled]:not([disabled=false]){background-color:#0000}&[variant=secondary]{box-shadow:inset 0 0 0 1px var(--figma-color-border);padding:0 calc(var(--spacer-2) - 1px);color:var(--figma-color-text);background:0 0;&:active{background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}}&[variant=input]{background-color:var(--figma-color-bg-secondary);box-shadow:none;color:var(--figma-color-text);&:hover{box-shadow:inset 0 0 0 1px var(--figma-color-border);background-color:var(--figma-color-bg-transparent)}&:active{background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}&:focus-visible{background-color:var(--figma-color-bg-secondary)}}&[variant=overlay]{color-scheme:light;background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:0 0 0 1px var(--figma-color-bordertranslucent);&:active,&:has(:active){background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}}&[icon]{width:var(--spacer-4);flex-grow:0;flex-shrink:0;flex-basis:var(--spacer-4);padding:0;&[size=compact]{width:var(--spacer-3);flex-basis:var(--spacer-3)}}&[disabled]:not([disabled=false]){background-color:var(--figma-color-bg-disabled);pointer-events:none;cursor:not-allowed;&:not([variant=secondary]){color:var(--figma-color-text-ondisabled);box-shadow:none}&[variant=secondary],&[variant=ghost]{color:var(--figma-color-text-disabled);background-color:#0000}}&[size=large],&[size=large]>button{height:var(--spacer-5);padding:0 var(--spacer-3)}&[size=large][icon],&[size=large][icon]>button{width:var(--spacer-5);flex-basis:var(--spacer-5);padding:0}&[full]{width:100%}&[inline=false],&[inline=false]>button{text-align:left;width:100%;height:auto;padding:var(--spacer-1) var(--spacer-2);justify-content:left;align-items:center;display:flex}&[type=select],&[type=upload]{position:relative;overflow:hidden;&>select,&>input,&>fig-dropdown{opacity:0;appearance:none;position:absolute;inset:0}}&[inline=false]{padding:0}&[selected]:not([selected=false]){&,&:hover{color:var(--figma-color-icon-brand);background-color:var(--figma-color-bg-selected)}}&:focus-visible,&[data-focus-visible]{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}& svg{& [fill]{fill:currentColor}& [stroke]:not([stroke=none]){stroke:currentColor}}&:has(svg:first-child):not([icon]){padding-left:var(--spacer-1)}}.fig-button-combo,fig-button-combo,.fig-input-combo,fig-input-combo{flex-wrap:nowrap;align-items:center;gap:0;display:inline-flex;&>*{&:first-child,&:first-child>*{border-top-right-radius:0;border-bottom-right-radius:0}&:last-child,&:last-child>*{border-top-left-radius:0;border-bottom-left-radius:0}&:not(:last-child):not(:first-child),&:not(:last-child):not(:first-child)>*{border-radius:0}}}.fig-input-combo,fig-input-combo{gap:1px}.fig-button-combo,fig-button-combo{&>:not([variant=secondary]):not(:first-child){box-shadow:inset 1px 0 0 0 var(--figma-color-bg-brand-hover);&[disabled]:not([disabled=false]){box-shadow:inset 1px 0 0 0 var(--figma-color-border-disabled)}}&>[variant=secondary]:not(:first-child){border-left-width:0!important;&[disabled]:not([disabled=false]){border-left-width:0!important}}}fig-tab,.fig-tab{height:1.5rem;padding:0 var(--spacer-2);appearance:none;cursor:default;user-select:none;border-radius:var(--radius-medium);color:var(--figma-color-text-secondary);border:0;flex-direction:column;justify-content:center;align-items:center;display:inline-flex;position:relative;gap:0!important;&[label]{&:after{content:attr(label);color:var(--figma-color-text-secondary);visibility:hidden;user-select:none;pointer-events:none;font-weight:var(--body-medium-strong-fontWeight);overflow:hidden;width:auto!important;height:0!important}}&:has(:checked),&[selected]:not([selected=false]){background-color:var(--figma-color-bg-secondary);font-weight:var(--body-medium-strong-fontWeight);color:var(--figma-color-text)}&:hover{background-color:var(--figma-color-bg-secondary)}& [type=radio]{opacity:0;z-index:1;border-radius:0;width:100%;height:100%;position:absolute;inset:0}}fig-tabs,.tabs{gap:var(--spacer-2);display:flex}fig-tab-content,.fig-tab-content{display:none}fig-avatar,.fig-avatar{contain:layout paint;--size:1.5rem;width:var(--size);height:var(--size);background:var(--figma-color-bg-brand);color:var(--figma-color-icon-onbrand);border:0;border-radius:100%;place-items:center;display:inline-grid;overflow:hidden;& img{width:var(--size);height:var(--size);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border-radius:100%;position:absolute;&:not([src]){background:var(--checkerboard)}}&[borderless] img{box-shadow:none}&:has(img[src]){background:0 0}&:after{content:attr(initials)}&[size=large]{--size:3rem}}input[type=color]{-webkit-appearance:none;appearance:none;box-sizing:content-box;border-radius:var(--radius-medium);background:0 0;background-color:var(--figma-color-bg-secondary);border:0;flex-shrink:0;width:.875rem;height:.875rem;margin:0;padding:.3125rem;display:inline-grid;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-color-swatch-wrapper{color-scheme:inherit;appearance:none;background:var(--checkerboard);color-scheme:inherit;border:0;border-radius:.125rem;outline:0;grid-area:1/1;padding:0;overflow:hidden}&::-webkit-color-swatch{color-scheme:inherit;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);color-scheme:inherit;mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);border:0;border-radius:.125rem;padding:0}}input[type=color]{&::-moz-color-swatch{color-scheme:inherit;appearance:none;mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border:0;border-radius:.125rem;padding:0}}fig-chit{--size:1.5rem;--padding:5px;--width:var(--size);--height:var(--size);--border-radius:var(--radius-medium);--chit-background:#d9d9d9;--chit-bg-size:cover;--chit-bg-position:center;--selected:0;--alpha:1;width:var(--size);height:var(--size);border-radius:var(--border-radius);background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 calc(var(--selected) * 1px) var(--figma-color-border-selected);display:inline-grid;&:before,&:after,& input{grid-area:1/1}&[selected]:not([selected=false]){--selected:1;background-color:#0000}&[size=medium],&[size=large]{--padding:0px;&[selected]:not([selected=false]){--padding:3px}}&[size=medium]{--size:1.5rem;--padding:0px}&[size=large]{--size:2rem;--padding:0px}&[disabled]:not([disabled=false]){pointer-events:none}&:before,&:after{content:"";width:calc(var(--width) - var(--padding) * 2);height:calc(var(--height) - var(--padding) * 2);border-radius:calc(var(--border-radius) - (var(--padding) / 2));pointer-events:none;grid-area:1/1;place-self:center}&:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);z-index:1}&:before{content:"";background:var(--chit-background);background-size:var(--chit-bg-size);background-position:var(--chit-bg-position);border-radius:calc(var(--border-radius) - (var(--padding) / 2));mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);background-repeat:no-repeat;grid-area:1/1;place-self:center}&[size=medium]:before,&[size=large]:before{border-radius:calc(var(--border-radius) - var(--padding))}& input[type=color]{width:var(--width);height:var(--height);box-sizing:border-box;opacity:0;background:0 0;grid-area:1/1;place-self:center}&[data-type=gradient],&[data-type=image]{background-color:var(--figma-color-bg-secondary);& input[type=color]{display:none}}&[data-type=image]:not([background]):after,&[data-type=image][background=""]:after,&[data-type=image][background="url()"]:after,&[checkerboard]:not([checkerboard=false]):after{background:var(--checkerboard)}}fig-image{--image-size:2rem;--fit:cover;--image-width:var(--image-size);--image-height:var(--image-size);--aspect-ratio:1 / 1;width:var(--image-width);height:var(--image-height);aspect-ratio:var(--aspect-ratio);place-items:center;display:inline-grid;&>*{grid-area:1/1}& fig-chit[size=large]{--padding:0px;--chit-bg-size:var(--fit);--size:100%!important;--width:100%!important;--height:100%!important;&[disabled]{opacity:1}}&:not([src]):not([src=""]) fig-button,&:hover fig-button{opacity:1;pointer-events:all}&[size=medium]{--image-size:4rem}&[size=large]{--image-size:8rem}&[size=auto]{--image-size:6rem;&[full]:not([full=false]){--image-width:100%}}&[aspect-ratio]{height:auto;& fig-chit{--size:100%!important;height:auto!important;aspect-ratio:var(--aspect-ratio)!important}}&>div{gap:var(--spacer-2);opacity:0;pointer-events:none;display:flex}&:not([src]):not([src=""])>div,&:hover>div{opacity:1;pointer-events:all}& fig-button[type=download]{display:none}&[src]:not([src=""]){& fig-button[type=download]{display:inline-flex}}}fig-easing-curve{gap:var(--spacer-2);--stroke-width:1;--easing-bezier-handle-radius:5;--easing-spring-handle-radius:5;--easing-handle-fill:var(--figma-color-border-strong);--easing-duration-bar-width:7;--easing-duration-bar-height:16;--easing-duration-bar-radius:4;--aspect-ratio:1 / 1;flex-direction:column;width:100%;display:flex;& .fig-easing-curve-svg{width:100%;aspect-ratio:var(--aspect-ratio);overflow:visible}& .fig-easing-curve-svg-container{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);padding:var(--spacer-3);overflow:hidden;&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}}&.spring-mode{& .fig-easing-curve-svg-container,& .fig-easing-curve-svg{cursor:ew-resize}}& .fig-easing-curve-diagonal,& .fig-easing-curve-bounds,& .fig-easing-curve-arm,& .fig-easing-curve-path,& .fig-easing-curve-target{pointer-events:none}& .fig-easing-curve-diagonal{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-bounds{fill:#0000}& .fig-easing-curve-arm{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-path{fill:none;stroke:var(--figma-color-text);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-target{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-handle{pointer-events:all;cursor:default;overflow:visible}& .fig-easing-curve-endpoint{fill:var(--easing-handle-fill)}& .fig-easing-curve-duration-bar fig-handle{--border-radius:calc(var(--easing-duration-bar-radius) * 1px);--width:calc(var(--easing-duration-bar-width) * 1px);--height:calc(var(--easing-duration-bar-height) * 1px)}& .fig-easing-curve-dropdown{& option svg{vertical-align:middle}}}fig-3d-rotate{gap:var(--spacer-2);--aspect-ratio:1 / 1;--perspective:20rem;--perspective-origin:50% 50%;--transform-origin:50% 50% -50cqi;--gradient-start-color:light-dark(#0000000d,#ffffff0d);--border-width:1px;--border-start-color:light-dark(#0000001a,#ffffff1a);--border-end-color:transparent;--gradient-end-color:transparent;--figma-3d-rotate-handle-size:6px;--front-face-bg:light-dark(var(--figma-color-bg),#555);flex-wrap:wrap;width:100%;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0}&>fig-input-number{flex:1 0 3rem}& .fig-3d-rotate-container{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);width:100%;aspect-ratio:var(--aspect-ratio);cursor:grab;user-select:none;flex:100%;justify-content:center;align-items:center;padding:0 2.5rem;display:flex;overflow:hidden;&.dragging,&:active{cursor:grabbing}&:focus{outline:0}}& .fig-3d-rotate-scene{aspect-ratio:1;width:100%;max-width:max(3.5rem,50%);max-height:max(3.5rem,50%);perspective:var(--perspective,20rem);perspective-origin:var(--perspective-origin,50% 50%);container-type:inline-size}& .fig-3d-rotate-cube{aspect-ratio:1;width:100%;height:100%;transform-style:preserve-3d;transform-origin:var(--transform-origin,50% 50% -50cqi);position:relative}& .fig-3d-rotate-face{backface-visibility:visible;background:linear-gradient(to bottom, var(--gradient-start-color), var(--gradient-end-color));position:absolute;inset:0;&.selected{border-radius:var(--radius-medium);box-shadow:var(--elevation-100-canvas);inset:-1px;background:var(--figma-color-border-strong)!important}&.front{background:var(--front-face-bg);border-radius:var(--radius-medium);transform-style:preserve-3d;box-shadow:var(--elevation-100-canvas);inset:-1px;&:after{content:"";width:var(--figma-3d-rotate-handle-size);height:var(--figma-3d-rotate-handle-size);background:var(--figma-color-border-strong);backface-visibility:hidden;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}&.back{transform-origin:100%;background:linear-gradient(to bottom, var(--border-start-color), var(--border-end-color));border-radius:var(--radius-medium);transform:translate(-100%)rotateY(-.25turn)translate(-100%)rotateY(-.25turn)}&.right{transform-origin:0%;background:linear-gradient(to right, var(--gradient-start-color), var(--gradient-end-color));border-width:var(--border-width) 0;border-style:solid;border-image:linear-gradient(to right, var(--border-start-color), var(--border-end-color)) 1;transform:translate(100%)rotateY(.25turn)}&.left{transform-origin:100%;background:linear-gradient(to left, var(--gradient-start-color), var(--gradient-end-color));border-width:var(--border-width) 0;border-style:solid;border-image:linear-gradient(to left, var(--border-start-color), var(--border-end-color)) 1;transform:translate(-100%)rotateY(-.25turn)}&.top{transform-origin:50% 100%;background:linear-gradient(to top, var(--gradient-start-color), var(--gradient-end-color));border-width:0 var(--border-width);border-style:solid;border-image:linear-gradient(to top, var(--border-start-color), var(--border-end-color)) 1;transform:rotateX(.25turn)}&.bottom{transform-origin:50% 0;background:linear-gradient(to bottom, var(--gradient-start-color), var(--gradient-end-color));border-width:0 var(--border-width);border-style:solid;border-image:linear-gradient(to bottom, var(--border-start-color), var(--border-end-color)) 1;top:100%;bottom:auto;transform:rotateX(-.25turn)}}}fig-origin-grid{gap:var(--spacer-2);--aspect-ratio:1 / 1;--origin-grid-dot-size:.125rem;--origin-grid-handle-size:.75rem;--origin-grid-height:var(--spacer-4);flex-direction:column;width:100%;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0}& .fig-origin-grid-surface{width:100%;aspect-ratio:var(--aspect-ratio);min-height:calc(var(--origin-grid-height) * 3)}& .origin-grid{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);user-select:none;cursor:default;width:100%;height:100%;position:relative;container-type:size;&.is-dragging{cursor:grabbing!important;& fig-handle{cursor:grabbing!important}}&.drag-disabled{& fig-handle{cursor:default}}}& .origin-grid-cells{grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}& .origin-grid-cell{width:100%;height:100%;min-height:var(--origin-grid-height);color:var(--figma-color-icon-tertiary);pointer-events:none;place-items:center;display:grid;& .origin-grid-dot{width:var(--origin-grid-dot-size);height:var(--origin-grid-dot-size);border-radius:var(--radius-small);background:currentColor}&.is-hovered{color:var(--figma-color-bg-brand-secondary);& .origin-grid-dot{width:var(--origin-grid-handle-size);height:var(--origin-grid-handle-size)}}}& fig-handle{--origin-overflow-rotation:0deg;--origin-overflow-nudge-base:var(--spacer-2-5);--origin-overflow-nudge-x:0px;--origin-overflow-nudge-y:0px;--origin-overflow-nudge-x-scale:calc((100cqb / 100cqi) * -1);--origin-overflow-nudge-y-scale:calc((100cqb / 100cqi) * -1);--width:var(--origin-grid-handle-size);--height:var(--origin-grid-handle-size);--border-radius:var(--radius-small);transform:translate(calc(-50% + var(--origin-overflow-nudge-x)), calc(-50% + var(--origin-overflow-nudge-y))) rotate(var(--origin-overflow-rotation));cursor:default;touch-action:none;position:absolute;top:50%;left:50%;&.beyond-bounds-x,&.beyond-bounds-y{-webkit-mask-image:var(--icon-arrow-left);mask-image:var(--icon-arrow-left);--border-radius:0;--box-shadow:none;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}&.beyond-bounds-x.overflow-right{--origin-overflow-rotation:180deg}&.beyond-bounds-y:not(.beyond-bounds-x){--origin-overflow-rotation:90deg}&.beyond-bounds-y.overflow-down:not(.beyond-bounds-x){--origin-overflow-rotation:-90deg}&.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-up{--origin-overflow-rotation:45deg}&.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-down{--origin-overflow-rotation:-45deg}&.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-up{--origin-overflow-rotation:135deg}&.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-down{--origin-overflow-rotation:-135deg}&.overflow-left{--origin-overflow-nudge-x:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale))}&.overflow-right{--origin-overflow-nudge-x:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale) * -1)}&.overflow-up{--origin-overflow-nudge-y:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale))}&.overflow-down{--origin-overflow-nudge-y:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale) * -1)}}& .origin-values{gap:var(--spacer-2);grid-template-columns:1fr 1fr;display:grid}}.input-combo{flex-wrap:nowrap;align-items:center;gap:1px;display:inline-flex;&>label{color:var(--figma-color-text);align-self:stretch}&>*{&:first-child:not(:last-child),&:first-child:not(:last-child)>*{border-top-right-radius:0;border-bottom-right-radius:0}&:last-child:not(:first-child),&:last-child:not(:first-child)>*{border-top-left-radius:0;border-bottom-left-radius:0}&:not(:last-child):not(:first-child),&:not(:last-child):not(:first-child)>*{border-radius:0}}}.fig-input-fill-label{padding:0 var(--spacer-2) 0 var(--spacer-1);height:var(--control-height);font-size:var(--font-size-small);color:var(--figma-color-text-secondary);background:var(--figma-color-bg-secondary);user-select:none;flex:1;align-items:center;min-width:0;margin-left:-1px;display:inline-flex}input[type=checkbox].switch{contain:strict;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-color:var(--figma-color-bg-switch);width:2rem;height:1rem;transition:var(--input-transition);box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border:0;border-radius:.5rem;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;top:0;left:0}input[type=checkbox].switch:after{content:"";background-color:var(--handle-color);width:calc(1rem - 2px);height:calc(1rem - 2px);transition:var(--input-transition);box-shadow:var(--handle-shadow);border-radius:.5rem;margin:1px;transform:translate(-.5rem)}input[type=checkbox].switch[indeterminate=true]:after{width:.5rem;height:.125rem;transform:none}input[type=checkbox].switch[indeterminate=true],input[type=checkbox].switch:checked{background-color:var(--figma-color-bg-brand)}input[type=checkbox].switch:checked:after{transform:translate(.5rem)}input[type=checkbox].switch:disabled{background-color:var(--figma-color-bg-secondary);cursor:not-allowed;&:after{background-color:var(--figma-color-bg)}}input[type=checkbox].switch:focus,input[type=checkbox].switch:checked:focus{outline:0}input[type=checkbox]:not(.switch){contain:strict;--size:1rem;appearance:none;border-radius:var(--radius-medium);width:var(--size);height:var(--size);aspect-ratio:1;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-secondary);vertical-align:middle;&:after{content:"";width:var(--size);height:var(--size);mask-image:var(--icon-checkmark);background-color:#0000}&:hover:not(:checked):not(:disabled){&:after{opacity:.25;background-color:var(--figma-color-icon)}}&:checked{background-color:var(--figma-color-bg-brand);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected-strong);&:after{background-color:var(--figma-color-icon-onbrand)}}&:focus{outline:0;&:not(:checked){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}}}@media (prefers-color-scheme:light){:root:not(.figma-dark):not(.figma-light) input[type=checkbox]:not(.switch):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A")}}:root.figma-light input[type=checkbox]:not(.switch):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A")}label.checkbox:has([type=checkbox]){padding-left:1.5rem;& [type=radio]{margin-left:-1.5rem}}input[type=radio]{contain:strict;appearance:none;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-secondary);vertical-align:middle;border-radius:.5rem;place-content:center;margin:0;display:inline-grid;&:checked{background-color:var(--figma-color-bg-brand);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected-strong);&:after{transform:scale(1)}}&:focus{outline:0;&:not(:checked){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}}&:hover:not(:checked):not(:disabled){&:after{opacity:.25;background-color:var(--figma-color-icon);transform:scale(1)}}&:after{content:"";background-color:var(--figma-color-icon-onbrand);border-radius:100%;width:.375rem;height:.375rem;transform:scale(0);box-shadow:0 0 0 .75px #0000001a,0 1px 3px #0000001a,0 3px 8px #0000001a,0 0 .5px #0000002e}}label.radio:has([type=radio]){padding-left:1.5rem;& [type=radio]{margin-left:-1.5rem}}fieldset{padding:var(--spacer-2) 0;border:0;flex-direction:column;align-items:start;gap:.25rem;display:flex;&>legend{color:var(--figma-color-text-secondary);margin-top:.125rem;font-size:.625rem;font-weight:500;line-height:.875rem}&>label{column-gap:var(--spacer-2);grid-template-columns:4rem 1fr;align-items:center;width:100%;display:grid}}details{&>summary{font-weight:var(--body-medium-strong-fontWeight);cursor:default;height:var(--spacer-5);user-select:none;color:var(--figma-color-text-secondary);align-items:center;padding:0 1rem 0 0;display:flex;&:before{content:"";mask-image:var(--icon-chevron);background:var(--figma-color-text-secondary);width:1rem;height:1rem;transition:transform var(--transition-duration) var(--transition-timing-function);justify-content:center;align-items:start;display:inline-flex;transform:rotate(-90deg)}&::-webkit-details-marker{display:none}&::marker{content:""}}&>summary:hover,&[open]>summary{color:inherit;&:before{opacity:1}}&[open]{&>summary:before{transform:rotate(0)}}}.fig-slider,fig-slider{--slider-field-height:1.5rem;--slider-height:1rem;--slider-thumb-size:var(--slider-height);--slider-thumb-width:var(--slider-thumb-size);--slider-thumb-height:var(--slider-thumb-size);--slider-thumb-color:var(--handle-color);--slider-thumb-radius:calc(var(--slider-thumb-width) / 2);--slider-thumb-opacity:1;--slider-thumb-outline:none;--slider-thumb-outline-offset:2px;--slider-tick-opacity:1;--slider-tick-radius:100%;--slider-border-radius:calc(var(--slider-height) / 2);--slider-stepper-padding:calc((var(--slider-height) / 2) - var(--slider-tick-width) / 2);--slider-percent:calc(var(--slider-complete) * 100%);--start-percent:calc(var(--default,0) * 100%);--slider-tick-width:calc(var(--slider-height) / 4);--slider-tick-height:calc(var(--slider-height) / 4);--slider-handle-shadow:inset 0 0 0 calc(4px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0px 0 0 .5px #0000001a, var(--figma-elevation-100);--slider-handle-shadow-focus:inset 0 0 0 4px var(--slider-thumb-color), inset 0 0 0 5px #0000001a, var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);--slider-transition:none;--handle-transition:var(--slider-transition);height:var(--slider-field-height);transition:var(--slider-transition);align-items:center;display:inline-flex;position:relative;& .fig-slider-input-container{height:var(--slider-height);width:100%;transition:var(--slider-transition);background:var(--figma-color-bg-secondary);border-radius:var(--slider-border-radius);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);display:block;position:relative;&:before{content:"";background:var(--figma-color-bg-brand);pointer-events:none;border-radius:var(--slider-border-radius);min-width:var(--slider-height);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);width:calc(var(--slider-percent) + (1 - var(--slider-complete)) * var(--slider-height));max-width:100%;position:absolute;top:0;bottom:0;left:0}}&[type=stepper]{& .fig-slider-input-container{&:before{display:none}}}&[type=delta]{& datalist option{left:calc(var(--start-percent) - var(--slider-tick-width) / 2);top:calc(50% - var(--slider-tick-height) / 2);margin:0;position:absolute}& .fig-slider-input-container{&:before{--left-start:calc(var(--start-percent) - var(--slider-height) / 2);left:min(var(--left-start), var(--slider-percent) - (var(--slider-complete)) * var(--slider-height));--width:calc(var(--slider-percent) - var(--start-percent));--abs-width:max(var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) * var(--slider-height), -1 * var(--width) + var(--slider-height) / 2 + (var(--slider-complete)) * var(--slider-height));width:var(--abs-width);--delta:calc(var(--slider-complete) - var(--default));--abs-delta:max(var(--delta), -1 * var(--delta));opacity:calc(var(--abs-delta) * 100)}}}&[type=hue],&[type=opacity]{& .fig-slider-input-container{&:before{display:none}}}& input[type=range]{height:var(--slider-height);-webkit-appearance:none;appearance:none;border-radius:var(--slider-border-radius);width:100%;transition:var(--slider-transition);background-color:#0000;display:block;position:relative;&:active::-webkit-slider-thumb{cursor:grabbing;cursor:-webkit-grabbing}&:focus{outline:none}&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;color-scheme:inherit;transition:var(--handle-transition);border-radius:var(--slider-thumb-radius);height:var(--slider-thumb-height);width:var(--slider-thumb-width);margin-top:calc(var(--slider-height) / 2 - var(--slider-thumb-height) / 2);outline:var(--slider-thumb-outline);outline-offset:var(--slider-thumb-outline-offset);aspect-ratio:1;z-index:1;cursor:default;box-shadow:var(--slider-handle-shadow);opacity:var(--slider-thumb-opacity);background:0 0;border:none;position:relative}&:disabled{cursor:not-allowed;&::-webkit-slider-runnable-track{color-scheme:inherit;background:linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent))}&::-webkit-slider-thumb{box-shadow:inset 0 0 0 1rem var(--figma-color-bg-disabled)}}&::-webkit-slider-runnable-track{color-scheme:inherit;height:var(--slider-height);transition:var(--slider-transition);border-radius:var(--slider-border-radius);background-color:#0000}&.hue::-webkit-slider-runnable-track{background:var(--bg-hue)}&.opacity::-webkit-slider-runnable-track{background:linear-gradient(to right, transparent, var(--color)), var(--checkerboard)}}& input[type=range]{height:var(--slider-height);-moz-appearance:none;appearance:none;border-radius:var(--slider-border-radius);width:100%;transition:var(--slider-transition);background-color:#0000;display:block;position:relative;&:focus{outline:none}&:active::-moz-range-thumb{cursor:grabbing;cursor:-webkit-grabbing}&::-moz-range-thumb{color-scheme:inherit;-moz-appearance:none;appearance:none;border-radius:var(--slider-thumb-radius);height:var(--slider-thumb-height);width:var(--slider-thumb-width);outline:var(--slider-thumb-outline);outline-offset:var(--slider-thumb-outline-offset);aspect-ratio:1;z-index:1;cursor:default;box-shadow:var(--slider-handle-shadow);transition:var(--handle-transition);opacity:var(--slider-thumb-opacity);background:0 0;border:none;position:relative}&:disabled{cursor:not-allowed;&::-moz-range-track{color-scheme:inherit;background:linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent))}&::-moz-range-thumb{box-shadow:inset 0 0 0 1rem var(--figma-color-bg-disabled)}}&::-moz-range-track{height:var(--slider-height);border-radius:var(--slider-border-radius);transition:var(--slider-transition);background-color:#0000}&.hue::-moz-range-track{background:var(--bg-hue)}&.opacity::-moz-range-track{background:linear-gradient(to right, transparent, var(--color)), var(--checkerboard)}}& datalist{transition:var(--slider-transition);appearance:none;padding:0 var(--slider-stepper-padding);height:var(--slider-height);pointer-events:none;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;margin:0;display:flex;position:absolute;inset:0;& option{appearance:none;width:var(--slider-tick-width);height:var(--slider-tick-height);border-radius:var(--slider-tick-radius);background:var(--figma-color-icon-tertiary);opacity:var(--slider-tick-opacity);border:0;padding:0;font-size:0;display:block;&[default]{background:var(--figma-color-icon)}&:first-child:last-child{margin:0 auto}}}&[variant=minimal]{--slider-height:.375rem;--slider-thumb-size:.75rem;--slider-tick-width:calc(var(--slider-height) / 2);--slider-tick-height:calc(var(--slider-height) / 2);--handle-transition:none;--slider-transition:none;--slider-handle-shadow:inset 0 0 0 calc(6px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0 0 0 .75px #00000013, inset 0 0 0 5px #0000001a, var(--figma-elevation-100);& .fig-slider-input-container{height:var(--slider-height);width:100%;display:block;position:relative}& fig-input-text{height:calc(var(--slider-height) * 2);background-color:#0000}&:hover,&:focus-within{& fig-input-text{height:auto}}}&[variant=neue]{--slider-height:.375rem;--slider-thumb-size:.75rem;--slider-tick-width:calc(var(--slider-height) / 2);--slider-tick-height:calc(var(--slider-height) / 2);--handle-transition:none;--slider-transition:none;--slider-handle-shadow:inset 0 0 0 calc(6px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0 0 0 .75px #00000013, inset 0 0 0 5px #0000001a, var(--figma-elevation-100);background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);padding-left:var(--spacer-2);&:not([text=true]){padding-right:var(--spacer-2)}& .fig-slider-input-container{height:var(--slider-height);width:100%;box-shadow:none;background-color:var(--figma-color-bg-tertiary);display:block;position:relative}& fig-input-text,& fig-input-number{border-left:1px solid var(--figma-color-bg);border-top-left-radius:0;border-bottom-left-radius:0;flex-basis:5rem}&:hover,&:focus-within{& fig-input-text,& fig-input-number{height:auto}}}}.dialog,dialog,.popover,[popover]{contain:layout;color:var(--figma-color-text);border-radius:var(--radius-large,.8125rem);background:var(--figma-color-bg);min-width:var(--popover-min-width);box-shadow:var(--figma-elevation-500-modal-window);border:0;outline:0;padding:0;inset:auto;& footer{padding:var(--spacer-2);justify-content:flex-end;gap:var(--spacer-2);display:flex}& p{padding:0 var(--spacer-3)}&:popover-open{display:block;outline:none!important}& header{height:var(--spacer-6);padding:var(--spacer-2);font-weight:var(--body-medium-strong-fontWeight);box-shadow:inset 0 -1px 0 0 var(--figma-color-border);align-items:center;margin:0;display:flex;& h3{font:inherit}&>:first-child{padding-left:var(--spacer-2)}}&[tooltip]{color:var(--color-tooltip);background-color:var(--bg-tooltip);padding:var(--spacer-1) var(--spacer-2);box-sizing:content-box;min-width:var(--popover-min-width);max-width:var(--popover-min-width);top:anchor(top);left:anchor(center);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--radius-medium,.3125rem);overflow:hidden;box-shadow:0 0 .5px #00000026,0 5px 12px #00000021,0 1px 3px #0000001a;line-height:1rem!important;@supports (-webkit-line-clamp:2){white-space:initial;-webkit-line-clamp:2;-webkit-box-orient:vertical}&:popover-open{display:inline-block;@supports (-webkit-line-clamp:2){display:-webkit-box}min-width:0}}}dialog[is=fig-dialog]{--z-index:999999;z-index:var(--z-index)}dialog[is=fig-popup]{contain:layout;--z-index:999999;--beak-offset:1px;z-index:var(--z-index);min-width:0;margin:0;padding:0;position:fixed;overflow:auto;&[autoresize]:not([autoresize=false]){width:max-content;max-width:calc(100vw - var(--spacer-4));max-height:calc(100vh - var(--spacer-4))}&[open]{display:block}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=menu]{background-color:var(--figma-color-bg-menu);color:var(--figma-color-text-menu);color-scheme:dark}&[variant=popover]{filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);overflow:visible;box-shadow:inset 0 .5px #ffffff1a;&:after{content:"";background-color:inherit;clip-path:path("M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z");z-index:2;pointer-events:none;width:1rem;height:6px;position:absolute}&[data-beak-side=bottom]:after{top:calc(100% - 1px);left:var(--beak-offset,50%);transform:translate(-50%)}&[data-beak-side=top]:after{top:1px;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}&[data-beak-side=left]:after{left:6px;top:var(--beak-offset,50%);transform:translate(-100%,-50%)rotate(90deg)}&[data-beak-side=right]:after{left:calc(100% - 6px);top:var(--beak-offset,50%);transform:translateY(-50%)rotate(-90deg)}}}dialog[is=fig-toast]{contain:layout paint;--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--figma-color-bg);justify-content:center;&[open]{display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}& fig-button:last-child{margin-right:calc(var(--spacer-2) * -1)}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-tooltip{display:contents}.fig-tooltip{contain:layout;inset:unset;color:var(--color-tooltip);background-color:var(--bg-tooltip);padding:var(--spacer-1) var(--spacer-2);font-weight:inherit;border-radius:var(--radius-medium,.3125rem);filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);width:max-content;max-width:180px;display:inline-block;overflow:visible;box-shadow:inset 0 .5px #ffffff1a;line-height:1rem!important;&>span{text-wrap:balance;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;width:auto;max-height:2.5rem;display:-webkit-box;overflow-y:hidden}&:after{content:"";background-color:inherit;clip-path:var(--tip-pointer);width:6px;height:3px;top:100%;left:var(--beak-offset,50%);z-index:2;position:absolute;transform:translate(-50%)}&[position=bottom]{&:after{top:0;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}}}fig-icon{display:block}fig-icon.close{contain:strict;background-color:var(--figma-color-text);width:1rem;height:1rem;clip-path:path("M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z")}fig-button,fig-content,fig-slider,fig-switch,fig-input-color,fig-input-gradient,fig-input-fill,fig-checkbox,fig-radio,fig-tab,fig-tabs,fig-segmented-control,fig-input-palette{gap:var(--spacer-2);user-select:none;display:inline-flex;&[full]:not([full=false]){width:100%;display:flex}}fig-dropdown{&[full]:not([full=false]){width:100%;display:flex}}fig-checkbox,fig-radio{align-items:center;padding-top:.25rem;padding-bottom:.25rem;& label span{vertical-align:middle}}fig-switch{align-items:center;padding-top:.25rem;padding-bottom:.25rem}fig-input-color{--alpha:1}fig-header{height:var(--spacer-6);padding:var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);box-shadow:inset 0 -1px 0 0 var(--figma-color-border);align-items:center;gap:.25rem;margin:0;display:flex;& h3{font-weight:var(--body-medium-strong-fontWeight);flex-grow:1}&[borderless]{box-shadow:none}}fig-footer{justify-content:flex-end;align-items:center;gap:var(--spacer-2);height:var(--spacer-6);padding:var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);box-shadow:inset 0 1px 0 0 var(--figma-color-border);display:flex;& h3{font-weight:var(--body-medium-strong-fontWeight);align-items:baseline;gap:var(--spacer-half);flex-grow:1;display:flex}&[borderless]{box-shadow:none}&[sticky]:not([sticky=false]){z-index:10;background:var(--figma-color-bg);margin-top:auto;position:sticky;bottom:0}}fig-content{padding:var(--spacer-2) 0;display:block}vstack,.vstack,[vstack]{align-items:start;gap:var(--spacer-2);flex-flow:column wrap;display:flex}hstack,.hstack,[hstack]{gap:var(--spacer-2);flex-wrap:nowrap;align-items:start;display:flex}fig-input-text,fig-input-number{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);user-select:all;min-width:0;color:var(--figma-color-text);border:0;flex-wrap:nowrap;flex:1;justify-content:center;gap:0;display:inline-flex;&[full]:not([full=false]),&[multiline]{width:100%;display:flex}&[autoresize] input,&[autoresize] textarea{field-sizing:content}&[resizable] input,&[resizable] textarea{resize:both}&[resizable]:has(textarea[style*=width]),&[resizable]:has(textarea[style*=height]),&[resizable]:has(input[style*=width]),&[resizable]:has(input[style*=height]){flex:unset}& label,& [slot]{flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;display:flex}& [slot]{user-select:none;width:1.5rem;color:var(--figma-color-text-secondary)}& [slot=prepend]{margin-right:calc(var(--spacer-2) * -1);padding-right:0}& [slot=append]{margin-left:calc(var(--spacer-2) * -1);padding-left:0}& input{flex:1;background-color:#0000!important;&:focus,&:active{box-shadow:none!important}}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&:hover{box-shadow:inset 0 0 0 1px var(--figma-color-border)}&[disabled]:not([disabled=false]){background-color:var(--figma-color-bg);pointer-events:none;cursor:not-allowed;color:var(--figma-color-text-disabled);box-shadow:inset 0 0 0 1px var(--figma-color-border-disabled);& [slot]{color:var(--figma-color-text-disabled)}}}fig-input-number>[slot],fig-input-text[type=number]>[slot]{cursor:ew-resize!important}fig-input-color,fig-input-gradient,fig-input-fill{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);box-shadow:none!important;&:focus,&:focus-within,&.has-popup-open{outline:1px solid var(--figma-color-border-selected)!important;outline-offset:-1px!important}&:hover{outline:1px solid var(--figma-color-border);outline-offset:-1px!important}&>.input-combo>fig-chit:not(:only-child),&>.input-combo>fig-chit:not(:only-child) input,&>.input-combo>fig-fill-picker:not(:only-child),&>.input-combo>fig-fill-picker:not(:only-child)>fig-chit>input,&>.input-combo>label,& fig-fill-picker:not(:only-child),& fig-input-text,& fig-chit{&,&:focus,&:hover{--selected:0;box-shadow:none!important;background-color:#0000!important;border:0!important}}& fig-chit~fig-input-text>input,& fig-chit~label,& fig-fill-picker~fig-input-text>input,& fig-fill-picker~label{padding-left:0!important}&>.input-combo{flex:1;min-width:0}& fig-input-number{flex:0 3rem;box-shadow:inset 1px 0 0 0 var(--figma-color-bg)!important;background-color:#0000!important}&[disabled]:not([disabled=false]){& .input-combo{gap:0}}fig-field[direction=horizontal] &{flex:1;min-width:0}}fig-input-gradient{position:relative;&:focus,&:active,&:focus-within{outline:1px solid var(--figma-color-border-selected)!important;outline-offset:-1px!important}&>fig-chit{--padding:0;--width:100%;flex:auto;width:100%!important;min-width:0!important}& .fig-input-gradient-track{pointer-events:auto;align-items:center;display:flex;position:absolute;inset:0;& fig-handle{pointer-events:auto;cursor:default;&:hover{z-index:5}}}}fig-input-palette{gap:var(--spacer-2);flex-direction:column;min-width:0;display:inline-flex!important;& .palette-colors{border-radius:var(--radius-medium);flex-wrap:nowrap;grid-area:inputs;gap:0;width:100%;min-width:0;display:flex;overflow:hidden}& .palette-add-btn{grid-area:button}& .palette-colors-inline{border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);grid-template-columns:1fr 24px;grid-template-areas:"inputs button";width:100%;display:inline-grid!important;& .palette-colors{background-color:var(--figma-color-bg-secondary);display:flex;& fig-input-color{width:100%}& fig-chit{--padding:0px;--border-radius:0px;--width:100%;min-width:0;height:var(--size);flex:1;border-radius:0!important;width:100%!important;& input,&:before,&:after{border-radius:0!important;padding:0!important}}}}&[expanded]:not([expanded=false]):not([edit=false]){& .palette-colors-expanded{display:flex}}&[add=false]{& .palette-colors-expanded,& .palette-colors-inline{grid-template-areas:"inputs inputs"}}& .palette-colors-expanded{gap:var(--spacer-2);border-radius:0;flex-direction:column;width:100%;display:none;overflow:visible;&>fig-input-color{min-width:0}& fig-chit{--border-radius:var(--radius-medium);height:var(--size);border-radius:var(--radius-medium)!important;width:auto!important}}}fig-field[direction=horizontal]:has(>fig-input-palette){padding-right:var(--spacer-2)}fig-slider{display:flex;& .slider{flex-grow:1}& fig-input-number{flex-basis:5rem}fig-field[direction=horizontal] &{flex:1;min-width:0}}fig-field,.fig-field{--field-label-width:4rem;padding:var(--spacer-1) var(--spacer-3);flex-direction:column;align-items:start;gap:0;margin:0;display:flex;&[direction=horizontal]{align-items:center;gap:var(--spacer-2);flex-direction:row}&>[full]{flex:auto}&:not(:has(>label))>[full]:not([full=false]){align-self:stretch;width:100%}&>label{padding:var(--spacer-1) 0;min-height:calc(1rem + var(--spacer-1) * 2);flex:0;justify-content:space-between;align-items:center;width:100%;display:flex}&[direction=horizontal]>label{width:auto;min-width:var(--field-label-width);max-width:var(--field-label-width);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}&[direction=horizontal]{gap:var(--spacer-2);flex-direction:row;align-items:start;&>label{min-width:4rem}&[columns=thirds]{gap:var(--spacer-2);grid-template-columns:repeat(3,1fr);display:grid;&>label{grid-column:1}&>label~*{grid-column:2/span 2}&:not(:has(>label))>*{grid-column:1/-1}}&[columns=half]{gap:var(--spacer-2);grid-template-columns:repeat(2,1fr);display:grid;&>label{grid-column:1}&>label~*{grid-column:2/span 2}&:not(:has(>label))>*{grid-column:1/-1}}}}fig-field-slider{--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative;& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}& fig-field{padding-left:var(--spacer-2-5);position:relative;&[direction=horizontal]>label{flex:auto;width:100%;min-width:0;max-width:none}& fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important;&:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}& .fig-slider-input-container{box-shadow:none!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}}&:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{border-radius:0!important}}&:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}&[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important;&:hover,&:has(input:focus){box-shadow:none!important}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}& input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}}fig-spinner{background-color:var(--figma-color-icon-tertiary);width:1rem;height:1rem;clip-path:path("M15.9995 7.86066C16.0271 9.44267 15.585 10.9973 14.729 12.3281C13.8731 13.6588 12.6417 14.7058 11.1907 15.3368C9.73968 15.9677 8.13415 16.1542 6.57716 15.8726C5.02016 15.591 3.58161 14.8541 2.44344 13.755C1.30526 12.6559 0.518574 11.2439 0.182856 9.69769C-0.152862 8.15147 -0.0225313 6.54042 0.557366 5.06826C1.13726 3.59611 2.14068 2.32898 3.44073 1.4271C4.74079 0.525221 6.27908 0.0291073 7.86109 0.00149397L7.87922 1.04037C6.50268 1.06439 5.16418 1.49607 4.03298 2.28081C2.90177 3.06556 2.02868 4.16812 1.5241 5.44907C1.01952 6.73002 0.906114 8.13183 1.19823 9.47724C1.49034 10.8226 2.17486 12.0512 3.16521 13.0076C4.15556 13.9639 5.40727 14.6052 6.76204 14.8502C8.11682 15.0951 9.51382 14.9329 10.7764 14.3839C12.0389 13.8349 13.1104 12.9239 13.8552 11.766C14.5999 10.6081 14.9846 9.25533 14.9606 7.87879L15.9995 7.86066Z");animation:1s linear infinite fig-spinner-spin;display:inline-flex}.segmented-control,fig-segmented-control{contain:layout paint;user-select:none;background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);--seg-indicator-x:0px;--seg-indicator-w:0px;--seg-indicator-opacity:0;--seg-indicator-transition-duration:0s;border:0;align-items:stretch;gap:0;height:1.5rem;padding:1px;display:inline-flex;position:relative;overflow:hidden;&:before{content:"";width:var(--seg-indicator-w);height:calc(100% - 2px);transform:translateX(var(--seg-indicator-x));border-radius:calc(var(--radius-medium) - 1px);background-color:var(--figma-color-bg);box-shadow:0 0 0 1px var(--figma-color-border);opacity:var(--seg-indicator-opacity);pointer-events:none;z-index:0;transition:transform var(--seg-indicator-transition-duration) ease, width var(--seg-indicator-transition-duration) ease, opacity .12s ease;position:absolute;top:1px;left:0}& fig-segment{z-index:1;appearance:none;color:var(--figma-color-text-secondary);padding:0 var(--spacer-2);flex:1 1 0;justify-content:center;align-items:center;transition:none;display:flex;position:relative;&[selected]:not([selected=false]),&[selected=true]{color:var(--figma-color-text);background-color:var(--figma-color-bg);border-radius:calc(var(--radius-medium) - 1px);box-shadow:0 0 0 1px var(--figma-color-border)}& svg{& [fill]{fill:currentColor}& [stroke]:not([stroke=none]){stroke:currentColor}}}&:not([sizing]),&[sizing=""],&[sizing=equal]{& fig-segment{flex:1 1 0}}&[sizing=auto]{flex:none;width:fit-content;max-width:100%;display:inline-flex;&[full]:not([full=false]){flex:none;align-self:auto;width:fit-content;display:inline-flex}& fig-segment{flex:none}}&[animated]:not([animated=false]){& fig-segment{&[selected]:not([selected=false]),&[selected=true]{box-shadow:none;background-color:#0000}}}&[size=large]{height:var(--spacer-5);& fig-segment{padding:0 var(--spacer-3)}}&[disabled]:not([disabled=false]){pointer-events:none;--seg-indicator-opacity:0;& fig-segment{color:var(--figma-color-text-disabled);box-shadow:none;background-color:#0000}}}@media (prefers-reduced-motion:reduce){.segmented-control:before,fig-segmented-control:before{transition:none!important}}fig-joystick{--size:100%;--aspect-ratio:1 / 1;--is-not-default:0;gap:var(--spacer-2);user-select:none;width:var(--size);flex-direction:column;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0;& fig-input-number{flex:1;width:auto}}& .joystick-values{gap:var(--spacer-2);grid-template-columns:1fr 1fr;display:grid}& .joystick-values>fig-input-number{width:100%}& .fig-input-joystick-plane-container{width:100%;aspect-ratio:var(--aspect-ratio);flex-grow:0;flex-shrink:0;place-items:center;display:flex;position:relative;&:focus{outline:0}}& .fig-joystick-reset{z-index:3;opacity:0;visibility:hidden;pointer-events:none;position:absolute;top:50%;left:50%;translate:-50% -50%;background-color:var(--figma-color-bg-secondary)!important;&:hover{& .fig-mask-icon{color:var(--figma-color-text)}}& .fig-mask-icon{--size:var(--spacer-3);color:var(--figma-color-text-tertiary)}}&:not([default]) .fig-joystick-reset{opacity:1;visibility:visible;pointer-events:auto}& .fig-joystick-axis-label{z-index:1;pointer-events:none;user-select:none;color:var(--figma-color-text-tertiary);letter-spacing:.01em;text-shadow:1px 0 0 var(--figma-color-bg-secondary), -1px 0 0 var(--figma-color-bg-secondary), 0 1px 0 var(--figma-color-bg-secondary), 0 -1px 0 var(--figma-color-bg-secondary);font-size:10px;font-weight:700;line-height:1;position:absolute;&.top{top:var(--spacer-2);left:50%;transform:translate(-50%)}&.bottom{bottom:var(--spacer-2);left:50%;transform:translate(-50%)}&.left{left:var(--spacer-2);transform-origin:50%;top:50%;transform:translateY(-50%)rotate(-90deg);&.no-rotate{transform:translateY(-50%)}}&.right{right:var(--spacer-2);transform-origin:50%;top:50%;transform:translateY(-50%)rotate(90deg)}}& .fig-input-joystick-plane{flex-shrink:0;place-items:center;width:100%;height:100%;display:inline-grid;position:relative}& .fig-input-joystick-plane>*{grid-area:1/1}& .fig-input-joystick-guides{width:var(--size);height:var(--size);border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);position:absolute;overflow:hidden;&:before{content:"";border-left:1px solid var(--figma-color-border);pointer-events:none;height:calc(100% - 2px);position:absolute;top:1px;left:calc(50% - .5px)}&:after{content:"";border-top:1px solid var(--figma-color-border);pointer-events:none;width:calc(100% - 2px);position:absolute;top:calc(50% - .5px);left:1px}}& .fig-input-joystick-plane.dragging .fig-input-joystick-guides{background:linear-gradient(45deg, transparent calc(50% - .5px), var(--figma-color-border) calc(50% - .5px), var(--figma-color-border) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--figma-color-border) calc(50% - .5px), var(--figma-color-border) calc(50% + .5px), transparent calc(50% + .5px)), var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}& .fig-input-joystick-plane-container:focus .fig-input-joystick-guides{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}& fig-handle{z-index:4;position:absolute}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field[direction=horizontal] &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus,&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}fig-layer{--indent:var(--spacer-2);color:var(--figma-color-text);user-select:none;border-radius:var(--radius-medium);width:100%;display:block;position:relative;&:has(fig-layer){&>.fig-layer-row{&>.fig-layer-chevron{visibility:visible}}}&>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);margin-left:0;display:flex;position:relative;& .fig-layer-chevron{mask-image:var(--icon-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}&:hover{background:var(--figma-color-bg-secondary);& .fig-layer-actions{opacity:1}}& .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}&>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}}& .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex;&>*{flex-shrink:0}}&>fig-layer{padding-left:var(--indent);margin-top:1px}&:not([open])>fig-layer,&[open=false]>fig-layer{display:none}&[open]:not([open=false]){&>.fig-layer-row>.fig-layer-chevron{rotate:0deg}}&[visible=false]>.fig-layer-row{&>label{color:var(--figma-color-text-tertiary)}}&[selected]:not([selected=false]){&>.fig-layer-row{background:var(--figma-color-bg-selected);&>.fig-layer-icon{color:var(--figma-color-icon)}}}}@keyframes fig-shimmer-text{0%{background-position:var(--shimmer-text-from,100% 0%)}to{background-position:var(--shimmer-text-to,0% 0%)}}@keyframes fig-shimmer-mask{0%{mask-position:var(--shimmer-mask-from,100% 0%)}to{mask-position:var(--shimmer-mask-to,0% 0%)}}fig-shimmer{--shimmer-angle:90deg;--shimmer-size:250% 100%;--shimmer-duration:1.5s;--shimmer-mask-from:100% 0%;--shimmer-mask-to:0% 0%;--shimmer-text-from:100% 0%;--shimmer-text-to:0% 0%;--shimmer-subtle-fill-color:var(--figma-color-bg-transparent);--shimmer-bright-fill-color:var(--figma-color-bg-tertiary);--shimmer-subtle-text-color:var(--figma-color-text-tertiary);--shimmer-bright-text-color:var(--figma-color-text);display:contents;&[direction=vertical]{--shimmer-angle:180deg;--shimmer-size:100% 250%;--shimmer-mask-from:0% 100%;--shimmer-text-from:0% 100%}&[direction=diagonal]{--shimmer-angle:135deg;--shimmer-size:250% 250%}&[playing=false] *{background:0 0;background-size:unset;animation:none}&[playing=false] :where(:not(:has(*)):not(:empty)){-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:unset}&:not([playing=false]) :where(:has(*),:empty){mask:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-fill-color) 0%, var(--shimmer-subtle-fill-color) 40%, var(--shimmer-bright-fill-color) 50%, var(--shimmer-subtle-fill-color) 60%, var(--shimmer-subtle-fill-color) 100%);mask-size:var(--shimmer-size);animation:fig-shimmer-mask var(--shimmer-duration) linear infinite}&:not([playing=false]) :where(:not(:has(*)):not(:empty)){background:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-text-color) 0%, var(--shimmer-subtle-text-color) 40%, var(--shimmer-bright-text-color) 50%, var(--shimmer-subtle-text-color) 60%, var(--shimmer-subtle-text-color) 100%);background-size:var(--shimmer-size);animation:fig-shimmer-text var(--shimmer-duration) linear infinite;mask:none;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important}}fig-skeleton{--shimmer-angle:90deg;--shimmer-size:250% 100%;--shimmer-duration:1.5s;--shimmer-mask-from:100% 0%;--shimmer-mask-to:0% 0%;--shimmer-subtle-mask-color:#000000bf;--shimmer-bright-mask-color:#000;display:contents;&[direction=vertical]{--shimmer-angle:180deg;--shimmer-size:100% 400%;--shimmer-mask-from:0% 100%}&[direction=diagonal]{--shimmer-angle:135deg;--shimmer-size:250% 250%}&:not([playing=false]) *{mask:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-mask-color) 0%, var(--shimmer-subtle-mask-color) 40%, var(--shimmer-bright-mask-color) 50%, var(--shimmer-subtle-mask-color) 60%, var(--shimmer-subtle-mask-color) 100%);mask-size:var(--shimmer-size);animation:fig-shimmer-mask var(--shimmer-duration) linear infinite;& *{color:#0000}}& label,& h3,& h2,& p,& span{background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium)}& :not(fig-field,fig-header){border-radius:var(--radius-medium);pointer-events:none;user-select:none;background:var(--figma-color-bg-secondary)!important;box-shadow:none!important;color:var(--figma-color-bg-secondary)!important}& ::placeholder{color:#0000!important}& :after,& :before,& ::marker,& ::picker-icon,& ::-webkit-slider-thumb,& ::-webkit-slider-runnable-track,& ::-webkit-color-swatch,& ::-webkit-color-swatch-wrapper,& ::-webkit-details-marker,& ::-webkit-inner-spin-button,& ::-webkit-outer-spin-button,& ::-webkit-calendar-picker-indicator{display:none!important}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}fig-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:0 var(--spacer-3);margin-top:var(--spacer-2);margin-bottom:var(--spacer-2);border-radius:var(--radius-medium);place-items:center;display:inline-grid;position:relative;&:before,&:after,&>*{border-radius:inherit;grid-area:1/1;place-self:center;width:100%;height:100%}&:after{content:"";box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);grid-area:1/1;place-self:center}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;&>fig-header{padding:var(--spacer-2);justify-content:space-between;align-items:center;display:flex}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-type-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--figma-color-text);padding:var(--spacer-1) var(--spacer-2)}& .fig-fill-picker-gamut{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-color-area{& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{width:3.5rem}& .fig-fill-picker-input-fields{flex:1;min-width:0;display:flex;& .input-combo,& fig-input-text{flex:1;min-width:0}}}& .fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:1;min-width:0}&>:last-child fig-button{margin-left:auto}& .fig-fill-picker-gradient-center{& fig-input-number{width:48px}}}& .fig-fill-picker-gradient-bar{background:linear-gradient(90deg,#d9d9d9 0%,#737373 100%)}& .fig-fill-picker-gradient-stops-handles{pointer-events:none;position:absolute;inset:0}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& .fig-fill-picker-media-header{& .fig-fill-picker-scale-mode{flex:1}& .fig-fill-picker-scale{width:56px}}& .fig-fill-picker-media-preview{aspect-ratio:1;margin:var(--spacer-1) var(--spacer-3);border-radius:var(--radius-medium);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& .fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& .fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin-bottom:var(--spacer-2);position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{gap:var(--spacer-1);display:flex;& .fig-fill-picker-camera-select{flex:1}& .fig-fill-picker-webcam-capture{flex-shrink:0}}}.fig-mask-icon{contain:strict;--size:var(--spacer-4);--icon:var(--icon-add);width:var(--size);height:var(--size);mask-image:var(--icon);mask-position:50%;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-image:var(--icon);background:currentColor;display:inline-flex;-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}@keyframes fig-spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}fig-chooser{--chooser-fade-size:var(--spacer-4);scrollbar-width:none;scroll-snap-type:y mandatory;flex-direction:column;gap:1px;display:flex;overflow:visible auto;&>*{scroll-snap-align:start}&[padding=false]{gap:var(--spacer-2);& fig-choice{--fig-choice-padding:0px}}&[overflow=scrollbar]{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}&[layout=horizontal]{scrollbar-width:none;flex-flow:row;overflow:auto hidden;&[overflow=scrollbar]{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}&>:not(.fig-chooser-nav-start):not(.fig-chooser-nav-end){flex:1}& fig-image[full]{min-width:3rem}}&[layout=grid]{grid-template-columns:1fr 1fr;display:grid;&>*{width:100%;min-width:0}&>.fig-chooser-nav-start,&>.fig-chooser-nav-end{grid-column:1/-1}}&[full]:not([full=false]){width:100%}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.4}& .fig-chooser-nav-start,& .fig-chooser-nav-end{all:unset;z-index:3;cursor:pointer;opacity:0;pointer-events:none;color:var(--figma-color-icon);flex-shrink:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:sticky;&:hover{background:var(--figma-color-bg)!important}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-chevron);background:currentColor;display:block;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}& .fig-chooser-nav-start{width:100%;height:var(--chooser-fade-size);margin-bottom:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to bottom, var(--eased-fade-stops));top:0;left:0;right:0;&:hover{box-shadow:0 1px 0 0 var(--figma-color-border)!important}&:after{rotate:180deg}}& .fig-chooser-nav-end{width:100%;height:var(--chooser-fade-size);margin-top:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to top, var(--eased-fade-stops));bottom:0;left:0;right:0;&:hover{box-shadow:0 -1px 0 0 var(--figma-color-border)!important}}&[layout=horizontal]{& .fig-chooser-nav-start,& .fig-chooser-nav-end{height:auto;width:var(--chooser-fade-size);align-self:stretch;margin:0;top:0;bottom:0}& .fig-chooser-nav-start{margin-right:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to right, var(--eased-fade-stops));left:0;right:auto;&:hover{box-shadow:1px 0 0 0 var(--figma-color-border)!important}&:after{rotate:90deg}}& .fig-chooser-nav-end{margin-left:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to left, var(--eased-fade-stops));left:auto;right:0;&:hover{box-shadow:-1px 0 0 0 var(--figma-color-border)!important}&:after{rotate:-90deg}}}&.overflow-start>.fig-chooser-nav-start,&.overflow-end>.fig-chooser-nav-end{opacity:1;pointer-events:auto}}fig-choice{--fig-choice-selection-ring-width:1.25px;--fig-choice-padding:var(--spacer-2);--fig-choice-border-radius:calc(var(--radius-medium) + var(--fig-choice-padding));border-radius:var(--fig-choice-border-radius);align-items:center;gap:var(--spacer-2);cursor:default;padding:var(--fig-choice-padding);border:1px solid #0000;outline:none;flex-direction:column;display:flex;&:hover:not([selected]):not([disabled]):not([aria-disabled=true]){background-color:var(--figma-color-bg-secondary)}&[padding=false]{--fig-choice-padding:0px}&[selected]{position:relative;&:after{content:"";border-radius:var(--fig-choice-border-radius);pointer-events:none;z-index:1;box-shadow:inset 0 0 0 4px var(--figma-color-bg);outline:var(--fig-choice-selection-ring-width) solid var(--figma-color-border-selected);outline-offset:calc(var(--fig-choice-selection-ring-width) * -1);position:absolute;inset:0}background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]),&[aria-disabled=true]{pointer-events:none;opacity:.4;cursor:default}}fig-handle{--width:.875rem;--height:.875rem;--fill:var(--figma-color-bg-brand);--border-radius:50%;--ring-width:.125rem;--box-shadow:0px 0 0 .5px #0000001a, var(--elevation-100-canvas);--outline:none;--border:none;width:var(--width);height:var(--height);background:var(--handle-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:var(--outline);border:var(--border);place-items:center;margin:0;padding:0;display:grid;&:before{content:"";color-scheme:light only;width:calc(var(--width) - var(--ring-width) * 2);height:calc(var(--height) - var(--ring-width) * 2);background:var(--fill);border-radius:var(--border-radius);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);place-self:center}&[size=small]{--width:11px;--height:11px}&[drag]:not([drag=false]){touch-action:none;position:absolute}&:hover,&[selected]:not([selected=false]){outline:1px solid var(--figma-color-border-selected);outline-offset:0}&[disabled]:not([disabled=false]),&[aria-disabled=true]{pointer-events:none;cursor:default}&[type=color],&[control]{overflow:visible;& fig-color-tip{z-index:10;position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%)}}}fig-color-tip{--tip-selection-width:1px;--tip-selection-scale:1;--beak-offset:50%;contain:layout;inset:unset;color:var(--figma-color-text);color-scheme:light only;aspect-ratio:1;background-color:var(--figma-color-bg);border-radius:var(--radius-medium,.3125rem);filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);flex-shrink:0;place-items:center;min-width:max-content;min-height:max-content;display:inline-grid;position:relative;overflow:visible;box-shadow:inset 0 .5px #ffffff1a;&[control=add],&[control=remove]{cursor:pointer}& fig-chit{& input[type=color]{background:0 0}}&[selected]:not([selected=false]):before{content:"";background:var(--figma-color-border-selected);clip-path:var(--tip-pointer);width:6px;height:3px;top:100%;left:var(--beak-offset,50%);z-index:1;pointer-events:none;transform:translate(-50%, 0) scale(var(--tip-selection-scale));transform-origin:50% 0;position:absolute}&:after{content:"";background-color:inherit;clip-path:var(--tip-pointer);width:6px;height:3px;top:calc(100% - 1px);left:var(--beak-offset,50%);z-index:3;position:absolute;transform:translate(-50%)}&[position=bottom]{&[selected]:not([selected=false]):before{top:1px;left:var(--beak-offset,50%);transform:translate(-50%, -100%) scale(var(--tip-selection-scale)) scaleY(-1);transform-origin:50% 100%}&:after{top:1px;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}}}