@rogieking/figui3 11.6.0 → 11.6.2

package/dist/fig-color.js

@@ -0,0 +1 @@
+var k=new Set(["srgb","display-p3"]);var m={srgb:[[0.4123907992659595,0.35758433938387796,0.1804807884018343],[0.21263900587151036,0.7151686787677559,0.07219231536073371],[0.01933081871559185,0.11919477979462599,0.9505321522496607]],"display-p3":[[0.4865709486482162,0.26566769316909306,0.1982172852343625],[0.2289745640697488,0.6917385218365064,0.079286914093745],[0,0.04511338185890264,1.043944368900976]]},G={srgb:[[3.2409699419045226,-1.537383177570094,-0.4986107602930034],[-0.9692436362808796,1.8759675015077202,0.04155505740717559],[0.05563007969699366,-0.20397695888897652,1.0569715142428786]],"display-p3":[[2.493496911941425,-0.9313836179191239,-0.40271078445071684],[-0.8294889695615747,1.7626640603183465,0.023624685841943577],[0.03584583024378447,-0.07617238926804182,0.9568845240076872]]};function b(n){return k.has(n)?n:"srgb"}function l(n,t,e){return Math.max(t,Math.min(e,Number(n)||0))}function p(n,t){return n.map((e)=>e[0]*t[0]+e[1]*t[1]+e[2]*t[2])}function g(n){let t=n/255;return t<=0.04045?t/12.92:((t+0.055)/1.055)**2.4}function M(n){return n<=0.0031308?12.92*n:1.055*Math.max(n,0)**0.4166666666666667-0.055}function T(n,t,e){return[g(n),g(t),g(e)]}function S(n,{clip:t=!0}={}){let e=n.map((o)=>M(o)*255),r=t?e.map((o)=>l(o,0,255)):e;return{r:Math.round(r[0]),g:Math.round(r[1]),b:Math.round(r[2])}}function I(n,t,e,r){return p(m[b(r)],T(n,t,e))}function x(n,t){return p(G[b(t)],n)}function y(n,t,e){let r=Math.cbrt(0.4122214708*n+0.5363325363*t+0.0514459929*e),o=Math.cbrt(0.2119034982*n+0.6806995451*t+0.1073969566*e),s=Math.cbrt(0.0883024619*n+0.2817188376*t+0.6299787005*e);return{l:0.2104542553*r+0.793617785*o-0.0040720468*s,a:1.9779984951*r-2.428592205*o+0.4505937099*s,b:0.0259040371*r+0.7827717662*o-0.808675766*s}}function B(n,t,e){let r=n+0.3963377774*t+0.2158037573*e,o=n-0.1055613458*t-0.0638541728*e,s=n-0.0894841775*t-1.291485548*e,a=r**3,u=o**3,i=s**3;return[4.0767416621*a-3.3077115913*u+0.2309699292*i,-1.2684380046*a+2.6097574011*u-0.3413193965*i,-0.0041960863*a-0.7034186147*u+1.707614701*i]}function N(n,t,e,r){let o=B(n,t,e);if(b(r)==="srgb")return o;let s=p(m.srgb,o);return x(s,r)}function L(n){return n.every((t)=>t>=-0.0000001&&t<=1.0000001)}function h(n){let t=Number(n);if(!Number.isFinite(t))return 0;return(t%360+360)%360}function H(n){let t=String(n??"").trim().replace(/^#/,"");if(t.length===3||t.length===4)t=[...t].map((e)=>e.repeat(2)).join("");if(!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(t))throw TypeError(`Invalid hex color: ${n}`);return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:t.length===8?parseInt(t.slice(6,8),16)/255:1}}function E(n,t,e,r=1){let o=[n,t,e].map((a)=>Math.round(l(a,0,255)).toString(16).padStart(2,"0")),s=l(r,0,1);if(s<1)o.push(Math.round(s*255).toString(16).padStart(2,"0"));return`#${o.join("").toUpperCase()}`}function V(n){return g(l(n,0,255))}function X(n){return Math.round(l(M(Number(n)),0,1)*255)}function $(n,t,e,{from:r="srgb",to:o="srgb",clip:s=!0}={}){let a=b(r),u=b(o);if(a===u){let c=s?[n,t,e].map((f)=>l(f,0,255)):[Number(n),Number(t),Number(e)];return{r:c[0],g:c[1],b:c[2]}}let i=I(n,t,e,a);return S(x(i,u),{clip:s})}function C(n,t,e,{colorSpace:r="srgb"}={}){let o=T(n,t,e);if(b(r)==="display-p3"){let s=p(m["display-p3"],o);o=x(s,"srgb")}return y(...o)}function P(n,t,e,{colorSpace:r="srgb",clip:o=!0}={}){return S(N(n,t,e,r),{clip:o})}function z(n,t,e){let r=Math.sqrt(t*t+e*e);return{l:n,c:r,h:r<0.0000001?0:h(Math.atan2(e,t)*180/Math.PI)}}function R(n,t,e){let r=h(e)*Math.PI/180;return{l:Number(n),a:Number(t)*Math.cos(r),b:Number(t)*Math.sin(r)}}function v(n,t,e,r){let o=C(n,t,e,r);return z(o.l,o.a,o.b)}function _(n,t,e,r={}){let o=r.gamutMap===!0?w(n,t,e,r):{l:n,c:t,h:e},s=R(o.l,o.c,o.h);return P(s.l,s.a,s.b,r)}function j(n){let{r:t,g:e,b:r}=H(n);return v(t,e,r)}function q(n,t,e,r={}){let{r:o,g:s,b:a}=_(n,t,e,{...r,gamutMap:r.gamutMap!==!1});return E(o,s,a)}function A(n,t,e){let r=l(n,0,255)/255,o=l(t,0,255)/255,s=l(e,0,255)/255,a=Math.max(r,o,s),u=Math.min(r,o,s),i=a-u,c=0;if(i!==0)if(a===r)c=60*((o-s)/i%6);else if(a===o)c=60*((s-r)/i+2);else c=60*((r-o)/i+4);let f=(a+u)/2,O=i===0?0:i/(1-Math.abs(2*f-1));return{h:h(c),s:O*100,l:f*100}}function F(n,t,e){let r=h(n),o=l(t,0,100)/100,s=l(e,0,100)/100,a=(1-Math.abs(2*s-1))*o,u=r/60,i=a*(1-Math.abs(u%2-1)),c;if(u<1)c=[a,i,0];else if(u<2)c=[i,a,0];else if(u<3)c=[0,a,i];else if(u<4)c=[0,i,a];else if(u<5)c=[i,0,a];else c=[a,0,i];let f=s-a/2;return{r:Math.round((c[0]+f)*255),g:Math.round((c[1]+f)*255),b:Math.round((c[2]+f)*255)}}function Y(n,t,e){let r=l(n,0,255)/255,o=l(t,0,255)/255,s=l(e,0,255)/255,a=Math.max(r,o,s),u=Math.min(r,o,s),i=a-u,c=0;if(i!==0)if(a===r)c=60*((o-s)/i%6);else if(a===o)c=60*((s-r)/i+2);else c=60*((r-o)/i+4);return{h:h(c),s:a===0?0:i/a*100,v:a*100}}function Z(n,t,e){let r=h(n),o=l(t,0,100)/100,s=l(e,0,100)/100,a=s*o,u=r/60,i=a*(1-Math.abs(u%2-1)),c;if(u<1)c=[a,i,0];else if(u<2)c=[i,a,0];else if(u<3)c=[0,a,i];else if(u<4)c=[0,i,a];else if(u<5)c=[i,0,a];else c=[a,0,i];let f=s-a;return{r:Math.round((c[0]+f)*255),g:Math.round((c[1]+f)*255),b:Math.round((c[2]+f)*255)}}function D(n,t,e,r="shorter"){let o=h(n),a=h(t)-o;switch(r){case"longer":if(a>0&&a<180)a-=360;else if(a<0&&a>-180)a+=360;break;case"increasing":if(a<0)a+=360;break;case"decreasing":if(a>0)a-=360;break;default:if(a>180)a-=360;else if(a<-180)a+=360;break}return h(o+a*Number(e))}function K(n,t){return Math.sqrt((Number(n?.l)-Number(t?.l))**2+(Number(n?.a)-Number(t?.a))**2+(Number(n?.b)-Number(t?.b))**2)}function d(n,t,e,{colorSpace:r="srgb"}={}){let o=R(n,t,e);return L(N(o.l,o.a,o.b,r))}function w(n,t,e,{colorSpace:r="srgb"}={}){let o=l(n,0,1),s=Math.max(0,Number(t)||0),a=h(e);if(d(o,s,a,{colorSpace:r}))return{l:o,c:s,h:a};let u=0,i=s;for(let c=0;c<24;c+=1){let f=(u+i)/2;if(d(o,f,a,{colorSpace:r}))u=f;else i=f}return{l:o,c:u,h:a}}export{v as figRGBToOklch,C as figRGBToOklab,V as figRGBToLinear,Y as figRGBToHsv,A as figRGBToHsl,E as figRGBToHex,_ as figOklchToRGB,R as figOklchToOklab,q as figOklchToHex,P as figOklabToRGB,z as figOklabToOklch,K as figOklabDistance,h as figNormalizeHue,w as figMapOklchToGamut,X as figLinearToSRGB,d as figIsOklchInGamut,D as figInterpolateHue,Z as figHsvToRGB,F as figHslToRGB,H as figHexToRGB,j as figHexToOklch,$ as figConvertRGB};

package/dist/fig-editor.css

@@ -1 +1 @@
-fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.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);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-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}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .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}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}fig-gradient-editor{width:100%;min-width:0;display:block;& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-3) var(--spacer-3) 0;background:0 0;overflow:visible;&:after{display:none}}& fig-header.fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{flex:none}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header>span{flex:1}}& .fig-fill-picker-gradient-stops-list{flex-direction:column;display:flex;& fig-reorder{display:contents}}& .fig-fill-picker-gradient-stop-row{&.dragging{background-color:var(--figma-color-bg-selected)}& .fig-fill-picker-gradient-stop-inputs{width:100%;min-width:0}& .fig-fill-picker-stop-position{flex:0 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}}}dialog[is=fig-popup-easing]{pointer-events:auto;width:12rem;min-width:0;padding:0;padding:0 var(--spacer-2-5)}dialog[is=fig-popup-gradient]{pointer-events:auto;width:15rem;min-width:0;padding:0;& .fig-gradient-editor-content{padding-top:var(--spacer-1)}}dialog[is=fig-popup-palette]{pointer-events:auto;width:12rem;min-width:0;padding:0}fig-input-point{width:8.9375rem;display:inline-flex;&[full]:not([full=false]){width:100%}&>fig-input-combo{width:100%;&>fig-input-number{flex:1 1 0;width:auto}}}:root,:host{--icon-24-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")}fig-interpolation-swatch{width:1.5rem;height:1.5rem;color:var(--figma-color-bordertranslucent);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible;&[size=large]{width:2rem;height:2rem;& .fig-interpolation-swatch-svg,& .fig-interpolation-swatch-fill{width:1.25rem;height:1.25rem}}& .fig-interpolation-swatch-svg{width:1rem;height:1rem;display:block;overflow:visible}& .fig-interpolation-swatch-fill{background:linear-gradient(90deg,red,#4f9eff);width:1rem;height:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}dialog[is=fig-toast]{--fig-toast-bg-color:var(--figma-color-bg);--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-5);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--fig-toast-bg-color);flex-wrap:nowrap;justify-content:center;&[icon]{&>fig-icon:first-child{margin-inline:calc(var(--spacer-2) * -1)}}&>fig-spinner:first-child{margin-inline:calc(var(--spacer-2) * -1)}&[open]:not([open=false]){flex-direction:row;display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}&>fig-separator[data-fig-toast-dismiss-separator]{--fig-separator-color:var(--figma-color-bordertranslucent);flex:none;align-self:stretch;margin:0}& fig-button:last-child{margin-inline:calc(var(--spacer-2) * -1);margin-left:calc(var(--spacer-1) * -1)}&>fig-icon[data-fig-toast-icon]{--size:var(--spacer-4);flex:none}&>fig-button[data-fig-toast-dismiss]{flex:none}&[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-palette-editor{flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:contents}& .fig-palette-editor-add{width:100%}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{width:240px;padding:0;&>fig-content{padding-bottom:var(--spacer-2-5);padding-top:var(--spacer-2)}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-tab:is([data-tab=solid],[data-tab=gradient]){& fig-preview{overflow:visible}}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:3}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;row-gap:var(--spacer-2);column-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}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{flex:unset;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not([slot=leading]):not([slot=trailing]):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-preview fig-button,& fig-input-file fig-button{visibility:hidden}&:hover{& fig-preview fig-button,& fig-input-file fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .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}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .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{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}fig-select{min-width:0;height:var(--spacer-4);border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:inset 0 0 0 1px var(--figma-color-border);align-items:center;display:inline-flex;position:relative;&[size=large]{height:var(--spacer-5)}&[full]:not([full=false]){width:100%;display:flex}&[icon]:not([icon=false]){--fig-select-icon-size:var(--spacer-4);flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);&[size=large]{--fig-select-icon-size:var(--spacer-5)}&::part(trigger){flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);justify-content:center;padding:0}&::part(label),&::part(prepend){display:none}&:after{left:50%;right:auto;transform:translate(-50%,-50%)}}&[disabled]:not([disabled=false]){pointer-events:none;color:var(--figma-color-text-tertiary);&:after{background-color:var(--figma-color-icon-disabled)}}&[variant=ghost]{box-shadow:none;background-color:#0000;&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){background-color:var(--figma-color-bg-secondary)}}&[variant=input]{box-shadow:none;background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text);&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-transparent)}&:active:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text)}&:focus-within{background-color:var(--figma-color-bg-secondary)}}&[open]:not([open=false]){color:var(--figma-color-text-selected);background-color:var(--figma-color-bg-selected);box-shadow:none;&:after{background-color:var(--figma-color-icon-selected)}}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-16-chevron);background-color:var(--figma-color-icon);pointer-events:none;z-index:1;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}fig-select::part(listbox){--z-index:999999;--fig-popup-radius:var(--radius-large);--fig-popup-bg-color:var(--figma-color-bg-menu);z-index:var(--z-index);border-radius:var(--fig-popup-radius);background-color:var(--fig-popup-bg-color);color:var(--figma-color-text-menu);color-scheme:dark;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0;height:max-content;max-height:calc(100vh - 1rem);margin:0;padding:0;position:fixed;overflow:hidden}fig-select-options>:is(fig-separator,fig-menu-separator){&[label]:not([label=""]){--fig-menu-inline-padding:var(--spacer-3);--fig-separator-padding-inline:var(--spacer-3,.75rem);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{max-width:100%;color:var(--figma-color-text-menu);user-select:none;text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden;& h3,& label{text-overflow:ellipsis;overflow:hidden}&>fig-icon[data-fig-select-checkmark]{margin:0 var(--spacer-1);visibility:hidden;order:-1}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary)}fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false])>fig-icon[data-fig-select-checkmark],&[aria-selected=true]>fig-icon[data-fig-select-checkmark]{visibility:visible}}fig-reorder{display:contents;&:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]{cursor:grab;&>fig-header,&>fig-header *,&>label{cursor:grab}}&>.dragging{background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}}[data-reorder-handle]{cursor:grab}body.fig-reorder-dragging{&,& *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}}.fig-reorder-indicator{pointer-events:none;z-index:1000000;border-radius:1px;position:fixed;&:before{content:"";background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute;top:0;left:0}&.fig-reorder-indicator-ring{&[data-axis=vertical]:before{left:var(--spacer-1);width:calc(100% - var(--spacer-1))}&[data-axis=horizontal]:before{top:var(--spacer-1);height:calc(100% - var(--spacer-1))}&:after{content:"";width:var(--spacer-2);height:var(--spacer-2);border:2px solid var(--figma-color-border-selected);border-radius:50%;position:absolute;top:1px;left:0;transform:translate(-50%,-50%)}&[data-axis=horizontal]:after{top:0;left:1px}}&[data-axis=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}
+fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.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);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-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}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .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}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[selected]:not([selected=false]){background-color:var(--figma-color-bg-selected)}&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}fig-gradient-editor{--fig-gradient-editor-overflow-show-rows:6.5;width:100%;min-width:0;display:block;& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-3) var(--spacer-3) 0;background:0 0;overflow:visible;&:after{display:none}}& fig-header.fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{flex:none}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header>span{flex:1}}& .fig-fill-picker-gradient-stops-list{flex-direction:column;display:flex;& fig-reorder{display:block!important}& fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-gradient-editor-overflow-show-rows) * 2rem)}}& .fig-fill-picker-gradient-stop-row{&.dragging{background-color:var(--figma-color-bg-selected)}& .fig-fill-picker-gradient-stop-inputs{width:100%;min-width:0}& .fig-fill-picker-stop-position{flex:0 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-palette-editor{--fig-palette-editor-overflow-show-rows:6.5;flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:block!important}&>fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-palette-editor-overflow-show-rows) * 2rem)}& .fig-palette-editor-add{width:100%}}dialog[is=fig-popup-easing]{pointer-events:auto;width:12rem;min-width:0;padding:0;padding:0 var(--spacer-2-5)}dialog[is=fig-popup-gradient]{pointer-events:auto;width:15rem;min-width:0;padding:0;& .fig-gradient-editor-content{padding-top:var(--spacer-1)}}dialog[is=fig-popup-palette]{pointer-events:auto;width:12rem;min-width:0;padding:0}fig-input-point{width:8.9375rem;display:inline-flex;&[full]:not([full=false]){width:100%}&>fig-input-combo{width:100%;&>fig-input-number{flex:1 1 0;width:auto}}}:root,:host{--icon-24-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")}fig-interpolation-swatch{width:1.5rem;height:1.5rem;color:var(--figma-color-bordertranslucent);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible;&[size=large]{width:2rem;height:2rem;& .fig-interpolation-swatch-svg,& .fig-interpolation-swatch-fill{width:1.25rem;height:1.25rem}}& .fig-interpolation-swatch-svg{width:1rem;height:1rem;display:block;overflow:visible}& .fig-interpolation-swatch-fill{background:linear-gradient(90deg,red,#4f9eff);width:1rem;height:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}dialog[is=fig-toast]{--fig-toast-bg-color:var(--figma-color-bg);--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-5);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--fig-toast-bg-color);flex-wrap:nowrap;justify-content:center;&[icon]{&>fig-icon:first-child{margin-inline:calc(var(--spacer-2) * -1)}}&>fig-spinner:first-child{margin-inline:calc(var(--spacer-2) * -1)}&[open]:not([open=false]){flex-direction:row;display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}&>fig-separator[data-fig-toast-dismiss-separator]{--fig-separator-color:var(--figma-color-bordertranslucent);flex:none;align-self:stretch;margin:0}& fig-button:last-child{margin-inline:calc(var(--spacer-2) * -1);margin-left:calc(var(--spacer-1) * -1)}&>fig-icon[data-fig-toast-icon]{--size:var(--spacer-4);flex:none}&>fig-button[data-fig-toast-dismiss]{flex:none}&[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-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{width:240px;padding:0;&>fig-content{padding-bottom:var(--spacer-2-5);padding-top:var(--spacer-2)}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-tab:is([data-tab=solid],[data-tab=gradient]){& fig-preview{overflow:visible}}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:3}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;row-gap:var(--spacer-2);column-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}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{flex:unset;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not([slot=leading]):not([slot=trailing]):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-preview fig-button,& fig-input-file fig-button{visibility:hidden}&:hover{& fig-preview fig-button,& fig-input-file fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .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}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .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{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}fig-select{min-width:0;height:var(--spacer-4);border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:inset 0 0 0 1px var(--figma-color-border);align-items:center;display:inline-flex;position:relative;&[size=large]{height:var(--spacer-5)}&[full]:not([full=false]){width:100%;display:flex}&[icon]:not([icon=false]){--fig-select-icon-size:var(--spacer-4);flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);&[size=large]{--fig-select-icon-size:var(--spacer-5)}&::part(trigger){flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);justify-content:center;padding:0}&::part(label),&::part(prepend){display:none}&:after{left:50%;right:auto;transform:translate(-50%,-50%)}}&[disabled]:not([disabled=false]){pointer-events:none;color:var(--figma-color-text-tertiary);&:after{background-color:var(--figma-color-icon-disabled)}}&[variant=ghost]{box-shadow:none;background-color:#0000;&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){background-color:var(--figma-color-bg-secondary)}}&[variant=input]{box-shadow:none;background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text);&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-transparent)}&:active:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text)}&:focus-within{background-color:var(--figma-color-bg-secondary)}}&[open]:not([open=false]){color:var(--figma-color-text-selected);background-color:var(--figma-color-bg-selected);box-shadow:none;&:after{background-color:var(--figma-color-icon-selected)}}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-16-chevron);background-color:var(--figma-color-icon);pointer-events:none;z-index:1;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}fig-select::part(listbox){--z-index:999999;--fig-popup-radius:var(--radius-large);--fig-popup-bg-color:var(--figma-color-bg-menu);z-index:var(--z-index);border-radius:var(--fig-popup-radius);background-color:var(--fig-popup-bg-color);color:var(--figma-color-text-menu);color-scheme:dark;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0;height:max-content;max-height:calc(100vh - 1rem);margin:0;padding:0;position:fixed;overflow:hidden}fig-select-options>:is(fig-separator,fig-menu-separator){&[label]:not([label=""]){--fig-menu-inline-padding:var(--spacer-3);--fig-separator-padding-inline:var(--spacer-3,.75rem);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{max-width:100%;color:var(--figma-color-text-menu);user-select:none;text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden;& h3,& label{text-overflow:ellipsis;overflow:hidden}&>fig-icon[data-fig-select-checkmark]{margin:0 var(--spacer-1);visibility:hidden;order:-1}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary)}fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false])>fig-icon[data-fig-select-checkmark],&[aria-selected=true]>fig-icon[data-fig-select-checkmark]{visibility:visible}}fig-reorder{display:contents;&:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]{cursor:grab;&>fig-header,&>fig-header *,&>label{cursor:grab}}&>.dragging{background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}}[data-reorder-handle]{cursor:grab}body.fig-reorder-dragging{&,& *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}}.fig-reorder-indicator{pointer-events:none;z-index:1000000;border-radius:1px;position:fixed;&:before{content:"";background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute;top:0;left:0}&.fig-reorder-indicator-ring{&[data-axis=vertical]:before{left:var(--spacer-1);width:calc(100% - var(--spacer-1))}&[data-axis=horizontal]:before{top:var(--spacer-1);height:calc(100% - var(--spacer-1))}&:after{content:"";width:var(--spacer-2);height:var(--spacer-2);border:2px solid var(--figma-color-border-selected);border-radius:50%;position:absolute;top:1px;left:0;transform:translate(-50%,-50%)}&[data-axis=horizontal]:after{top:0;left:1px}}&[data-axis=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}