@rogieking/figui3
Version:
A lightweight web components library for building Figma plugin and widget UIs with native look and feel
1 lines • 105 kB
CSS
: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:light-dark(#fff,#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:var(--figma-color-bg-menu);--color-tooltip:var(--figma-color-text);--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;--checkerboard-small:repeating-conic-gradient(#0003 0% 25%, #fff3 0% 50%) 0 0 / .5rem .5rem;--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='grey' 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");--icon-play: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='M7 7.75274C7 6.4055 8.45837 5.56342 9.625 6.23712L17.2109 10.619C18.277 11.2349 18.2771 12.7745 17.2109 13.3904L9.625 17.7723C8.45843 18.4459 7.00013 17.6038 7 16.2566V7.75274ZM9.125 7.10333C8.625 6.8145 8 7.17532 8 7.75274V16.2566C8.00013 16.834 8.62505 17.1949 9.125 16.9061L16.7109 12.5242C17.1107 12.2933 17.1106 11.7162 16.7109 11.4852L9.125 7.10333Z' fill='currentColor'/%3E%3C/svg%3E");--icon-pause: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='M9.65332 6.00781C10.4097 6.08461 11 6.72334 11 7.5V16.5C11 17.2767 10.4097 17.9154 9.65332 17.9922L9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V7.5C6 6.67157 6.67157 6 7.5 6H9.5L9.65332 6.00781ZM16.6533 6.00781C17.4097 6.08461 18 6.72334 18 7.5V16.5C18 17.2767 17.4097 17.9154 16.6533 17.9922L16.5 18H14.5C13.6716 18 13 17.3284 13 16.5V7.5C13 6.67157 13.6716 6 14.5 6H16.5L16.6533 6.00781ZM7.5 7C7.22386 7 7 7.22386 7 7.5V16.5C7 16.7761 7.22386 17 7.5 17H9.5C9.77614 17 10 16.7761 10 16.5V7.5C10 7.22386 9.77614 7 9.5 7H7.5ZM14.5 7C14.2239 7 14 7.22386 14 7.5V16.5C14 16.7761 14.2239 17 14.5 17H16.5C16.7761 17 17 16.7761 17 16.5V7.5C17 7.22386 16.7761 7 16.5 7H14.5Z' fill='currentColor'/%3E%3C/svg%3E");--tip-pointer:path("M8 6L2 0H14L8 6Z");--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 1px #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);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,&:active{background-color:var(--figma-color-text)!important}}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;&:active{transform:translateY(1px)}}& .fig-stepper-down{mask-image:var(--icon-chevron);&:active{transform:translateY(1px)}}}textarea{box-sizing:border-box;width:100%;min-height:2rem;display:block}select,input[type=text][list]{padding:var(--spacer-2);background-color:var(--figma-color-bg);&:not([multiple]){height:var(--spacer-4);padding:0 var(--spacer-4) 0 var(--spacer-2);background:calc(100% - var(--spacer-1)) 50% / 1rem no-repeat var(--icon-chevron)}&[multiple]{overflow:auto;& option{padding:var(--spacer-1) var(--spacer-2);border-radius:var(--radius-medium);&:checked{background-color:var(--figma-color-bg-selected-strong)!important}&:active{background-color:var(--figma-color-bg-active)}&:hover{background-color:var(--figma-color-bg-hover)}}}border-radius:var(--radius-medium);appearance:none;color:var(--figma-color-text);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;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}}&>button{justify-content:flex-start;align-items:center;gap:var(--spacer-1,.25rem);width:100%;color:inherit;font:inherit;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;height:100%;margin:0;padding:0;display:inline-flex;overflow:hidden;&>selectedcontent{align-items:center;gap:0;min-width:0;display:flex;&:has(>svg){margin-left:calc(var(--spacer-2) * -1)}& 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:not([multiple]){padding-right:var(--spacer-4);padding-left:var(--spacer-2)}fig-dropdown{&>:not(select){display:none!important}}fig-dropdown,select,.fig-dropdown{display:inline-flex;position:relative;&>select{flex:1;align-items:center;width:100%;display:flex}&:not([multiple]):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,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]:not([fill=none]){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}}&[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)}&[disabled]:not([disabled=false]){opacity:.4;pointer-events:none;cursor:default}}fig-tabs,.tabs{gap:var(--spacer-1);width:100%;padding:var(--spacer-1) var(--spacer-2);display:flex}fig-tab-content,.fig-tab-content{width:100%;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;padding:0;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:linear-gradient(#d9d9d9, #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,& div,& input{grid-area:1/1}&>div{background:var(--checkerboard-small);border-radius:var(--border-radius)}&[selected]:not([selected=false]){--selected:1;background-color:#0000}&[size=medium],&[size=large]{--padding:0px;&[selected]:not([selected=false]){--padding:3px}&>div{background:var(--checkerboard)}}&[size=medium]{--size:1.5rem;--padding:0px}&[size=large]{--size:2rem;--padding:0px}&[disabled]:not([disabled=false]){pointer-events:none}&:before,&:after,&>div{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}}}fig-truncate{white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom;min-width:0;max-width:100%;display:inline-block;overflow:hidden;&[position=left]{text-align:left;direction:rtl;display:block}&[position=middle]{text-overflow:clip;gap:0;display:inline-flex;&>.start,&>.end{white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;overflow:hidden}&>.end{text-align:left;text-overflow:ellipsis;direction:rtl}&[tail]{&>.end{text-align:right;direction:ltr;flex-shrink:0}}}}fig-input-file{align-items:center;gap:var(--spacer-2);min-width:0;display:flex;&[full]:not([full=false]){flex:auto;width:100%;&>fig-tooltip,&>fig-button{flex:1;min-width:0}&>fig-tooltip>fig-button{width:100%}}& .fig-input-file-filename{flex:1;min-width:0}& .fig-input-file-clear{flex-shrink:0}&[dragover] fig-button{outline:1px dashed var(--figma-color-border-brand);outline-offset:-1px}}fig-media,fig-image,fig-video{--fig-media-fit:contain;--fig-media-aspect-ratio:4/3;--fig-media-size:100%;max-width:var(--fig-media-size);max-height:var(--fig-media-size);background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);aspect-ratio:var(--fig-media-aspect-ratio);justify-content:center;align-items:center;min-height:4rem;display:inline-flex;position:relative;overflow:hidden;&[size=small]{--fig-media-size:2rem;min-height:auto;width:var(--fig-media-size)}&[size=medium]{--fig-media-size:4rem;min-height:auto;width:var(--fig-media-size)}&[size=large]{--fig-media-size:6rem;min-height:auto;width:var(--fig-media-size)}&>*{z-index:1;position:absolute}&[checkerboard]:not([checkerboard=false]){background:var(--checkerboard)}&:after{content:"";border-radius:inherit;border:1px solid var(--figma-color-bordertranslucent);width:100%;height:100%;position:absolute;inset:0}&>video,&>img,&>.fig-media-element[data-generated]{object-fit:var(--fig-media-fit);object-position:center;z-index:0;width:stretch;height:stretch;display:block;position:static}&:is(:not([src]),[src=""]):is(:not([poster]),[poster=""])>video.fig-media-element[data-generated],&:is(:not([src]),[src=""])>img.fig-media-element[data-generated]{opacity:0;pointer-events:none}&>fig-input-file[data-generated]{opacity:0;pointer-events:none;z-index:2}&:is(:not([src]),[src=""])>fig-input-file[data-generated],&:hover>fig-input-file[data-generated]{opacity:1;pointer-events:all}&>fig-media-controls[data-generated]{inset:var(--spacer-2);z-index:3;pointer-events:auto;width:auto;position:absolute;top:auto}}fig-media-controls{align-items:center;gap:var(--spacer-2);width:100%;display:flex;&[overlay]:not([overlay=false]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);color-scheme:light;padding:var(--spacer-1);box-shadow:0 0 0 1px var(--figma-color-bordertranslucent)}&>fig-slider{flex:auto;min-width:0}& .fig-media-controls-time{font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:var(--spacer-2)}}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