@rogieking/figui3/fig.css

A lightweight, customizable web component library that uses Figmas UI3 style for modern web applications, but specifically for Figma plugins.

:root {
  --figma-color-bg: #ffffff;
  --figma-color-bg-brand: #0d99ff;
  --figma-color-bg-menu: #1e1e1e;
  --figma-color-bg-menu-hover: #0c8ce9;
  --figma-color-bg-brand-hover: #007be5;
  --figma-color-bg-brand-pressed: #007be5;
  --figma-color-bg-brand-secondary: #0768cf;
  --figma-color-bg-brand-tertiary: #e5f4ff;
  --figma-color-bg-component: #9747ff;
  --figma-color-bg-component-hover: #8638e5;
  --figma-color-bg-component-pressed: #8638e5;
  --figma-color-bg-component-secondary: #7c2bda;
  --figma-color-bg-component-tertiary: #f1e5ff;
  --figma-color-bg-danger: #f24822;
  --figma-color-bg-danger-hover: #dc3412;
  --figma-color-bg-danger-pressed: #dc3412;
  --figma-color-bg-danger-secondary: #bd2915;
  --figma-color-bg-danger-tertiary: #ffe2e0;
  --figma-color-bg-disabled: #d9d9d9;
  --figma-color-bg-disabled-secondary: #b3b3b3;
  --figma-color-bg-hover: #f5f5f5;
  --figma-color-bg-inverse: #2c2c2c;
  --figma-color-bg-onselected: #bde3ff;
  --figma-color-bg-onselected-hover: #bde3ff;
  --figma-color-bg-onselected-pressed: #bde3ff;
  --figma-color-bg-pressed: #f5f5f5;
  --figma-color-bg-secondary: #f5f5f5;
  --figma-color-bg-selected: #e5f4ff;
  --figma-color-bg-selected-hover: #bde3ff;
  --figma-color-bg-selected-pressed: #bde3ff;
  --figma-color-bg-selected-secondary: #f2f9ff;
  --figma-color-bg-selected-strong: #0d99ff;
  --figma-color-bg-selected-tertiary: #f2f9ff;
  --figma-color-bg-success: #14ae5c;
  --figma-color-bg-success-hover: #009951;
  --figma-color-bg-success-pressed: #009951;
  --figma-color-bg-success-secondary: #008043;
  --figma-color-bg-success-tertiary: #cff7d3;
  --figma-color-bg-tertiary: #e6e6e6;
  --figma-color-bg-warning: #ffcd29;
  --figma-color-bg-warning-hover: #ffc21a;
  --figma-color-bg-warning-pressed: #ffc21a;
  --figma-color-bg-warning-secondary: #fab815;
  --figma-color-bg-warning-tertiary: #fff1c2;
  --figma-color-border: #e6e6e6;
  --figma-color-border-brand: #bde3ff;
  --figma-color-border-brand-strong: #007be5;
  --figma-color-border-component: #e4ccff;
  --figma-color-border-component-hover: #9747ff;
  --figma-color-border-component-strong: #8638e5;
  --figma-color-border-danger: #ffc7c2;
  --figma-color-border-danger-strong: #dc3412;
  --figma-color-border-disabled: #e6e6e6;
  --figma-color-border-disabled-strong: #0000004d;
  --figma-color-border-menu: #383838;
  --figma-color-border-onbrand: #007be5;
  --figma-color-border-onbrand-strong: #ffffff;
  --figma-color-border-oncomponent: #8638e5;
  --figma-color-border-oncomponent-strong: #ffffff;
  --figma-color-border-ondanger: #dc3412;
  --figma-color-border-ondanger-strong: #ffffff;
  --figma-color-border-onselected: #bde3ff;
  --figma-color-border-onselected-strong: #000000e5;
  --figma-color-border-onsuccess: #009951;
  --figma-color-border-onsuccess-strong: #ffffff;
  --figma-color-border-onwarning: #fab815;
  --figma-color-border-onwarning-strong: #000000e5;
  --figma-color-border-selected: #0d99ff;
  --figma-color-border-selected-strong: #007be5;
  --figma-color-border-strong: #2c2c2c;
  --figma-color-border-success: #aff4c6;
  --figma-color-border-success-strong: #009951;
  --figma-color-border-warning: #ffe8a3;
  --figma-color-border-warning-strong: #b86200;
  --figma-color-icon: #000000e5;
  --figma-color-icon-brand: #007be5;
  --figma-color-icon-brand-pressed: #0768cf;
  --figma-color-icon-brand-secondary: #80caff;
  --figma-color-icon-brand-tertiary: #bde3ff;
  --figma-color-icon-component: #8638e5;
  --figma-color-icon-component-pressed: #7c2bda;
  --figma-color-icon-component-secondary: #c5b2dc;
  --figma-color-icon-component-tertiary: #c5b2dc;
  --figma-color-icon-danger: #f24822;
  --figma-color-icon-danger-hover: #bd2915;
  --figma-color-icon-danger-pressed: #bd2915;
  --figma-color-icon-danger-secondary: #f24822;
  --figma-color-icon-danger-secondary-hover: #f24822;
  --figma-color-icon-danger-tertiary: #f24822;
  --figma-color-icon-disabled: #0000004d;
  --figma-color-icon-hover: #000000e5;
  --figma-color-icon-onbrand: #ffffff;
  --figma-color-icon-onbrand-secondary: #ffffffcc;
  --figma-color-icon-onbrand-tertiary: #ffffff66;
  --figma-color-icon-oncomponent: #ffffff;
  --figma-color-icon-oncomponent-secondary: #ffffffcc;
  --figma-color-icon-oncomponent-tertiary: #ffffff66;
  --figma-color-icon-ondanger: #ffffff;
  --figma-color-icon-ondanger-secondary: #ffffffcc;
  --figma-color-icon-ondanger-tertiary: #ffffff66;
  --figma-color-icon-ondisabled: #ffffff;
  --figma-color-icon-oninverse: #ffffffe5;
  --figma-color-icon-onselected: #000000e5;
  --figma-color-icon-onselected-secondary: #00000080;
  --figma-color-icon-onselected-strong: #ffffff;
  --figma-color-icon-onselected-tertiary: #0000004d;
  --figma-color-icon-onsuccess: #ffffff;
  --figma-color-icon-onsuccess-secondary: #ffffffcc;
  --figma-color-icon-onsuccess-tertiary: #ffffff66;
  --figma-color-icon-onwarning: #000000e5;
  --figma-color-icon-onwarning-secondary: #00000080;
  --figma-color-icon-onwarning-tertiary: #0000004d;
  --figma-color-icon-pressed: #007be5;
  --figma-color-icon-secondary: #00000080;
  --figma-color-icon-secondary-hover: #000000e5;
  --figma-color-icon-selected: #007be5;
  --figma-color-icon-selected-secondary: #007be5;
  --figma-color-icon-selected-tertiary: #007be5;
  --figma-color-icon-success: #14ae5c;
  --figma-color-icon-success-pressed: #008043;
  --figma-color-icon-success-secondary: #14ae5c;
  --figma-color-icon-success-tertiary: #14ae5c;
  --figma-color-icon-tertiary: #0000004d;
  --figma-color-icon-tertiary-hover: #000000e5;
  --figma-color-icon-warning: #ffcd29;
  --figma-color-icon-warning-pressed: #b86200;
  --figma-color-icon-warning-secondary: #ffcd29;
  --figma-color-icon-warning-tertiary: #ffcd29;
  --figma-color-text: #000000e5;
  --figma-color-text-brand: #007be5;
  --figma-color-text-brand-secondary: #007be5;
  --figma-color-text-brand-tertiary: #007be5;
  --figma-color-text-component: #8638e5;
  --figma-color-text-component-pressed: #7c2bda;
  --figma-color-text-component-secondary: #c5b2dc;
  --figma-color-text-component-tertiary: #c5b2dc;
  --figma-color-text-danger: #dc3412;
  --figma-color-text-danger-secondary: #dc3412;
  --figma-color-text-danger-tertiary: #dc3412;
  --figma-color-text-disabled: #0000004d;
  --figma-color-text-hover: #000000e5;
  --figma-color-text-onbrand: #ffffff;
  --figma-color-text-onbrand-secondary: #ffffffcc;
  --figma-color-text-onbrand-tertiary: #ffffff66;
  --figma-color-text-oncomponent: #ffffff;
  --figma-color-text-oncomponent-secondary: #ffffffcc;
  --figma-color-text-oncomponent-tertiary: #ffffff66;
  --figma-color-text-ondanger: #ffffff;
  --figma-color-text-ondanger-secondary: #ffffffcc;
  --figma-color-text-ondanger-tertiary: #ffffff66;
  --figma-color-text-ondisabled: #ffffff;
  --figma-color-text-oninverse: #ffffffe5;
  --figma-color-text-onselected: #000000e5;
  --figma-color-text-onselected-secondary: #00000080;
  --figma-color-text-onselected-strong: #ffffff;
  --figma-color-text-onselected-tertiary: #0000004d;
  --figma-color-text-onsuccess: #ffffff;
  --figma-color-text-onsuccess-secondary: #ffffffcc;
  --figma-color-text-onsuccess-tertiary: #ffffff66;
  --figma-color-text-onwarning: #000000e5;
  --figma-color-text-onwarning-secondary: #00000080;
  --figma-color-text-onwarning-tertiary: #0000004d;
  --figma-color-text-secondary: #00000080;
  --figma-color-text-secondary-hover: #000000e5;
  --figma-color-text-selection: rgba(13, 153, 255, 0.4);
  --figma-color-text-selected: #007be5;
  --figma-color-text-selected-secondary: #007be5;
  --figma-color-text-selected-tertiary: #007be5;
  --figma-color-text-success: #009951;
  --figma-color-text-success-secondary: #009951;
  --figma-color-text-success-tertiary: #009951;
  --figma-color-text-tertiary: #0000004d;
  --figma-color-text-tertiary-hover: #000000e5;
  --figma-color-text-warning: #b86200;
  --figma-color-text-warning-secondary: #b86200;
  --figma-color-text-warning-tertiary: #b86200;
  --figma-color-text-menu: #ffffff;
  --figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
  --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --figma-color-bg: #2c2c2c;
    --figma-color-bg-brand: #0c8ce9;
    --figma-color-bg-brand-hover: #0a6dc2;
    --figma-color-bg-brand-pressed: #0a6dc2;
    --figma-color-bg-brand-secondary: #105cad;
    --figma-color-bg-brand-tertiary: #394360;
    --figma-color-bg-component: #8a38f5;
    --figma-color-bg-component-hover: #7a2ed6;
    --figma-color-bg-component-pressed: #7a2ed6;
    --figma-color-bg-component-secondary: #652ca8;
    --figma-color-bg-component-tertiary: #473956;
    --figma-color-bg-danger: #e03e1a;
    --figma-color-bg-danger-hover: #c4381c;
    --figma-color-bg-danger-pressed: #c4381c;
    --figma-color-bg-danger-secondary: #963323;
    --figma-color-bg-danger-tertiary: #60332a;
    --figma-color-bg-disabled: #757575;
    --figma-color-bg-disabled-secondary: #b3b3b3;
    --figma-color-bg-hover: #383838;
    --figma-color-bg-inverse: #ffffff;
    --figma-color-bg-onselected: #667799;
    --figma-color-bg-onselected-hover: #667799;
    --figma-color-bg-onselected-pressed: #667799;
    --figma-color-bg-pressed: #383838;
    --figma-color-bg-secondary: #383838;
    --figma-color-bg-selected: #4a5878;
    --figma-color-bg-selected-hover: #536383;
    --figma-color-bg-selected-pressed: #536383;
    --figma-color-bg-selected-secondary: #394360;
    --figma-color-bg-selected-strong: #0c8ce9;
    --figma-color-bg-selected-tertiary: #394360;
    --figma-color-bg-success: #198f51;
    --figma-color-bg-success-hover: #078348;
    --figma-color-bg-success-pressed: #078348;
    --figma-color-bg-success-secondary: #0a5c35;
    --figma-color-bg-success-tertiary: #476656;
    --figma-color-bg-tertiary: #444444;
    --figma-color-bg-warning: #f3c11b;
    --figma-color-bg-warning-hover: #f2b50d;
    --figma-color-bg-warning-pressed: #f2b50d;
    --figma-color-bg-warning-secondary: #e4a711;
    --figma-color-bg-warning-tertiary: #5c4100;
    --figma-color-border: #444444;
    --figma-color-border-brand: #105cad;
    --figma-color-border-brand-strong: #7cc4f8;
    --figma-color-border-component: #652ca8;
    --figma-color-border-component-hover: #8a38f5;
    --figma-color-border-component-strong: #d6b6fb;
    --figma-color-border-danger: #963323;
    --figma-color-border-danger-strong: #fca397;
    --figma-color-border-disabled: #444444;
    --figma-color-border-disabled-strong: #ffffff66;
    --figma-color-border-onbrand: #0a6dc2;
    --figma-color-border-onbrand-strong: #ffffff;
    --figma-color-border-oncomponent: #7a2ed6;
    --figma-color-border-oncomponent-strong: #ffffff;
    --figma-color-border-ondanger: #c4381c;
    --figma-color-border-ondanger-strong: #ffffff;
    --figma-color-border-onselected: #667799;
    --figma-color-border-onselected-strong: #ffffffe5;
    --figma-color-border-onsuccess: #078348;
    --figma-color-border-onsuccess-strong: #ffffff;
    --figma-color-border-onwarning: #e4a711;
    --figma-color-border-onwarning-strong: #000000e5;
    --figma-color-border-selected: #0c8ce9;
    --figma-color-border-selected-strong: #7cc4f8;
    --figma-color-border-strong: #ffffffe5;
    --figma-color-border-success: #0a5c35;
    --figma-color-border-success-strong: #79d297;
    --figma-color-border-warning: #925711;
    --figma-color-border-warning-strong: #f7d15f;
    --figma-color-icon: #ffffff;
    --figma-color-icon-brand: #7cc4f8;
    --figma-color-icon-brand-pressed: #0c8ce9;
    --figma-color-icon-brand-secondary: #0a6dc2;
    --figma-color-icon-brand-tertiary: #394360;
    --figma-color-icon-component: #d1a8ff;
    --figma-color-icon-component-pressed: #d6b6fb;
    --figma-color-icon-component-secondary: #7f699b;
    --figma-color-icon-component-tertiary: #7f699b;
    --figma-color-icon-danger: #e03e1a;
    --figma-color-icon-danger-hover: #fbbcb6;
    --figma-color-icon-danger-pressed: #fbbcb6;
    --figma-color-icon-danger-secondary: #e03e1a;
    --figma-color-icon-danger-secondary-hover: #e03e1a;
    --figma-color-icon-danger-tertiary: #e03e1a;
    --figma-color-icon-disabled: #ffffff66;
    --figma-color-icon-hover: #ffffff;
    --figma-color-icon-onbrand: #ffffff;
    --figma-color-icon-onbrand-secondary: #ffffffcc;
    --figma-color-icon-onbrand-tertiary: #ffffff66;
    --figma-color-icon-oncomponent: #ffffff;
    --figma-color-icon-oncomponent-secondary: #ffffffcc;
    --figma-color-icon-oncomponent-tertiary: #ffffff66;
    --figma-color-icon-ondanger: #ffffff;
    --figma-color-icon-ondanger-secondary: #ffffffcc;
    --figma-color-icon-ondanger-tertiary: #ffffff66;
    --figma-color-icon-ondisabled: #2c2c2c;
    --figma-color-icon-oninverse: #000000e5;
    --figma-color-icon-onselected: #ffffff;
    --figma-color-icon-onselected-secondary: #ffffffb2;
    --figma-color-icon-onselected-strong: #ffffff;
    --figma-color-icon-onselected-tertiary: #ffffff66;
    --figma-color-icon-onsuccess: #ffffff;
    --figma-color-icon-onsuccess-secondary: #ffffffcc;
    --figma-color-icon-onsuccess-tertiary: #ffffff66;
    --figma-color-icon-onwarning: #000000e5;
    --figma-color-icon-onwarning-secondary: #00000080;
    --figma-color-icon-onwarning-tertiary: #0000004d;
    --figma-color-icon-pressed: #0a6dc2;
    --figma-color-icon-secondary: #ffffffb2;
    --figma-color-icon-secondary-hover: #ffffff;
    --figma-color-icon-selected: #7cc4f8;
    --figma-color-icon-selected-secondary: #7cc4f8;
    --figma-color-icon-selected-tertiary: #7cc4f8;
    --figma-color-icon-success: #198f51;
    --figma-color-icon-success-pressed: #a1e8b9;
    --figma-color-icon-success-secondary: #198f51;
    --figma-color-icon-success-tertiary: #198f51;
    --figma-color-icon-tertiary: #ffffff66;
    --figma-color-icon-tertiary-hover: #ffffff;
    --figma-color-icon-warning: #f3c11b;
    --figma-color-icon-warning-pressed: #f7d15f;
    --figma-color-icon-warning-secondary: #f3c11b;
    --figma-color-icon-warning-tertiary: #f3c11b;
    --figma-color-text: #ffffff;
    --figma-color-text-brand: #7cc4f8;
    --figma-color-text-brand-secondary: #7cc4f8;
    --figma-color-text-brand-tertiary: #7cc4f8;
    --figma-color-text-component: #d1a8ff;
    --figma-color-text-component-pressed: #d6b6fb;
    --figma-color-text-component-secondary: #7f699b;
    --figma-color-text-component-tertiary: #7f699b;
    --figma-color-text-danger: #fca397;
    --figma-color-text-danger-secondary: #fca397;
    --figma-color-text-danger-tertiary: #fca397;
    --figma-color-text-disabled: #ffffff66;
    --figma-color-text-hover: #ffffff;
    --figma-color-text-onbrand: #ffffff;
    --figma-color-text-onbrand-secondary: #ffffffcc;
    --figma-color-text-onbrand-tertiary: #ffffff66;
    --figma-color-text-oncomponent: #ffffff;
    --figma-color-text-oncomponent-secondary: #ffffffcc;
    --figma-color-text-oncomponent-tertiary: #ffffff66;
    --figma-color-text-ondanger: #ffffff;
    --figma-color-text-ondanger-secondary: #ffffffcc;
    --figma-color-text-ondanger-tertiary: #ffffff66;
    --figma-color-text-ondisabled: #2c2c2c;
    --figma-color-text-oninverse: #000000e5;
    --figma-color-text-onselected: #ffffffe5;
    --figma-color-text-onselected-secondary: #ffffffb2;
    --figma-color-text-onselected-strong: #ffffff;
    --figma-color-text-onselected-tertiary: #ffffff66;
    --figma-color-text-onsuccess: #ffffff;
    --figma-color-text-onsuccess-secondary: #ffffffcc;
    --figma-color-text-onsuccess-tertiary: #ffffff66;
    --figma-color-text-onwarning: #000000e5;
    --figma-color-text-onwarning-secondary: #00000080;
    --figma-color-text-onwarning-tertiary: #0000004d;
    --figma-color-text-secondary: #ffffffb2;
    --figma-color-text-secondary-hover: #ffffff;
    --figma-color-text-selected: #7cc4f8;
    --figma-color-text-selected-secondary: #7cc4f8;
    --figma-color-text-selected-tertiary: #7cc4f8;
    --figma-color-text-success: #79d297;
    --figma-color-text-success-secondary: #79d297;
    --figma-color-text-success-tertiary: #79d297;
    --figma-color-text-tertiary: #ffffff66;
    --figma-color-text-tertiary-hover: #ffffff;
    --figma-color-text-warning: #f7d15f;
    --figma-color-text-warning-secondary: #f7d15f;
    --figma-color-text-warning-tertiary: #f7d15f;
  }
}

:root {
  --font-size: 16px;
  --figma-color-bordertranslucent: rgba(0, 0, 0, 0.1);
  --checkerboard: repeating-conic-gradient(
      rgba(0, 0, 0, 0.1) 0% 25%,
      rgba(255, 255, 255, 0.1) 0% 50%
    )
    0 0 / 0.66666rem 0.66666rem;
  --bg-hue: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1),
    rgba(255, 48, 0, 1),
    rgba(255, 96, 0, 1),
    rgba(255, 143, 0, 1),
    rgba(255, 191, 0, 1),
    rgba(255, 239, 0, 1),
    rgba(223, 255, 0, 1),
    rgba(175, 255, 0, 1),
    rgba(128, 255, 0, 1),
    rgba(80, 255, 0, 1),
    rgba(32, 255, 0, 1),
    rgba(0, 255, 16, 1),
    rgba(0, 255, 64, 1),
    rgba(0, 255, 112, 1),
    rgba(0, 255, 159, 1),
    rgba(0, 255, 207, 1),
    rgba(0, 255, 255, 1),
    rgba(0, 207, 255, 1),
    rgba(0, 159, 255, 1),
    rgba(0, 112, 255, 1),
    rgba(0, 64, 255, 1),
    rgba(0, 16, 255, 1),
    rgba(32, 0, 255, 1),
    rgba(80, 0, 255, 1),
    rgba(127, 0, 255, 1),
    rgba(175, 0, 255, 1),
    rgba(223, 0, 255, 1),
    rgba(255, 0, 239, 1),
    rgba(255, 0, 191, 1),
    rgba(255, 0, 143, 1),
    rgba(255, 0, 96, 1),
    rgba(255, 0, 48, 1)
  );
  --input-transition: all 0.08s ease-out;
  --bg-selected: #f5f5f5;
  --bg-selected-active: #e5f4ff;
  --bg-tooltip: #1e1e1e;
  --body-medium-fontSize: 0.6875rem;
  --body-large-fontSize: 0.8125rem;
  --figma-color-border-selected: #0d99ff;
  --spacer-1: 0.25rem;
  --spacer-2: 0.5rem;
  --spacer-3: 1rem;
  --spacer-4: 1.5rem;
  --spacer-5: 2rem;
  --spacer-6: 2.5rem;
  --color-tooltip: #ffffff;
  --radius-medium: 0.3125rem;
  --radius-large: 0.8125rem;
  --body-letter-spacing: 0.055px;
  --body-medium-strong-fontWeight: 550;
  --body-large-strong-fontWeight: 500;
  --body-medium-fontWeight: 450;
  --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.05),
    0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px 3px 8px 0px rgba(0, 0, 0, 0.05),
    0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);

  --popover-min-width: 15rem;
  --figma-color-bg-ghost-hover: rgba(0, 0, 0, 0.05);
  --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
    0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);

  --figma-elevation-400-menu-panel: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
    0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);

  --figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
    0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);

  color-scheme: light dark;
  /* Icons */
  --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='rgb(0 0 0 / 90%)' 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 fill-rule='evenodd' clip-rule='evenodd' d='M11.7773 4.08403C12.0071 4.2372 12.0692 4.54764 11.916 4.7774L7.91603 10.7774C7.83293 10.902 7.69834 10.9829 7.54927 10.9976C7.4002 11.0124 7.25237 10.9595 7.14645 10.8536L4.14645 7.85361C3.95118 7.65834 3.95118 7.34176 4.14645 7.1465C4.34171 6.95124 4.65829 6.95124 4.85355 7.1465L7.42229 9.71523L11.084 4.2227C11.2372 3.99294 11.5476 3.93085 11.7773 4.08403Z' fill='white'/%3E%3C/svg%3E%0A");
  /* Elevations */
  --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
    0px 1px 3px 0px rgba(0, 0, 0, 0.15);

  --figma-elevation-200: 0px 1px 3px 0px rgba(0, 0, 0, 0.102),
    0px 3px 8px 0px rgba(0, 0, 0, 0.102), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);

  --font-family: "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next,
    avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
    arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --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='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
      0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
    --figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
    --figma-color-bordertranslucent: rgba(255, 255, 255, 0.1);
    --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
        rgba(255, 255, 255, 0.08) inset,
      0px 10px 16px 0px rgba(0, 0, 0, 0.35),
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
      0px 2px 5px 0px rgba(0, 0, 0, 0.35);

    --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
      0px 3px 5px rgba(0, 0, 0, 0.35),
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
    --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
      0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
      0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  }
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--figma-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--body-medium-fontWeight);
  letter-spacing: var(--body-letter-spacing);
  background-color: var(--figma-color-bg);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

::selection {
  background-color: var(--figma-color-text-selection);
}

::-moz-selection {
  background-color: var(--figma-color-text-selection);
}

body {
  font-size: var(--body-medium-fontSize);
  letter-spacing: var(--body-letter-spacing);
}

h1,
h2 {
  font-weight: var(--body-large-strong-fontWeight);
  font-size: var(--body-large-fontSize);
}
h3 {
  font-weight: var(--body-medium-strong-fontWeight);
  font-size: var(--body-medium-fontSize);
}

/* helper classes/defaults */
::-webkit-scrollbar {
  width: var(--spacer-1);
  /* Width of the vertical scrollbar */
  height: var(--spacer-1);
  /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: var(--figma-color-bg-tertiary);
  border-radius: calc(var(--spacer-1) / 2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--figma-color-bg-secondary);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--figma-color-bg-tertiary)
    var(--figma-color-bg-secondary);
}

.subtle {
  color: var(--figma-color-text-tertiary);
}

/* Defaults */
p {
  margin: var(--spacer-2) 0;
  line-height: 1rem;
  color: var(--figma-color-text-secondary);
}

label {
  color: var(--figma-color-text-secondary);
}

h2 {
  font-weight: var(--body-medium-strong-fontWeight);
  margin: var(--spacer-2) 0;
}

button,
select,
input,
fieldset {
  display: inline-flex;
  align-items: center;
  margin: 0;
  gap: 0.25rem;
  font: inherit;
  line-height: 1rem;
}

textarea,
input[type="text"],
input[type="number"],
input[type="password"],
.input {
  background-color: var(--figma-color-bg-secondary);
  border: 0;
  border-radius: var(--radius-medium);
  padding: var(--spacer-1) var(--spacer-2);
  line-height: 1rem !important;
  box-sizing: content-box;
  resize: none;
  min-width: 0;
  font: inherit;
  display: flex;
  color: inherit;
  -moz-appearance: textfield;

  &:focus {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    outline: 0;
  }
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    display: none;
    margin: 0;
  }
}

/* Textarea */
textarea {
  min-height: 2rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Dropdown */
select,
input[type="text"][list] {
  height: var(--spacer-4);
  padding: 0 calc(var(--spacer-2) - 1px);
  border-radius: var(--radius-medium);
  display: flex;
  appearance: none;
  align-items: center;
  flex: 1 0 0;
  border: 0;
  color: var(--figma-color-text);
  background-color: var(--figma-color-bg);
  box-shadow: inset 0 0 0 1px var(--figma-color-border);
  accent-color: var(--figma-color-bg-brand);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &:focus {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    outline: 0;
  }

  &::-webkit-calendar-picker-indicator {
    opacity: 0;
  }
}

@supports (appearance: base-select) {
  select {
    appearance: base-select;

    option::checkmark {
      content: var(--icon-checkmark);
      display: block;
      width: 1rem;
      height: 1rem;
    }

    option {
      display: flex;
      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);
      position: relative;
      &[hidden] {
        display: none;
      }
      &:not(:checked):before {
        content: "";
        display: block;
        position: absolute;
        inset: 0 var(--spacer-2);
        border-radius: var(--radius-medium);
        z-index: -1;
        background-color: transparent;
      }
      &:hover,
      &:active,
      &:focus {
        background-color: transparent;
        outline: 0;
        &:before {
          background-color: var(--figma-color-bg-menu-hover);
        }
      }
    }
    optgroup {
      color: var(--figma-color-text-menu-secondary);
      text-align: left;
      position: relative;
      padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
      font-weight: var(--body-medium-fontWeight);
      &::-internal-optgroup-label {
        display: none;
      }
      legend {
        padding: var(--spacer-1, 0.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) {
        margin-top: var(--spacer-2);
        padding-top: var(--spacer-2);

        &:before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          top: 1px;
          height: 1px;
          background-color: var(--figma-color-border-menu);
          margin-bottom: var(--spacer-2);
        }
      }
    }
  }
  ::picker-icon {
    display: none;
  }

  ::picker(select) {
    appearance: base-select;
    scrollbar-width: thin;
    outline: 0;
    scrollbar-color: var(--figma-color-text-menu-tertiary)
      var(--figma-color-bg-menu);
    border-radius: var(--radius-large);
    border: 0;
    background-color: var(--figma-color-bg-menu);
    padding: var(--spacer-2) 0;
    box-shadow: var(--figma-elevation-400-menu-panel);
  }
}
input[type="text"][list]:hover,
input[type="text"][list]:active,
input[type="text"][list]:focus,
select {
  background-image: var(--icon-chevron);
  background-position: calc(100% - 0.25rem) center;
  background-repeat: no-repeat;
}

input[type="text"][list],
select {
  padding-right: 1.5rem;
}

fig-dialog > *:not(dialog) {
  display: none !important;
}

/* Dropdown */
fig-dropdown,
.fig-dropdown {
  display: inline-flex;
  position: relative;

  & > *:not(select) {
    display: none !important;
  }
  > select {
    display: block;
    width: 100%;
  }
}

/* Button */
.fig-button,
fig-button {
  color: var(--figma-color-text-onbrand);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--spacer-4);
  padding: 0 var(--spacer-2);
  appearance: none;
  border: 0;
  color: var(--figma-color-text-onbrand);
  outline: 0;
  border-radius: var(--radius-medium);
  background-color: var(--figma-color-bg-brand);
  font-weight: 500;

  &:active {
    background-color: var(--figma-color-bg-brand-pressed);
  }

  /* Variant: Ghost */
  &[variant="ghost"],
  &[variant="link"] {
    box-shadow: none;
    background: none;
    color: var(--figma-color-text);

    &:hover:not(:active) {
      background-color: var(--figma-color-bg-ghost-hover);
    }

    &:active {
      outline: 0;
      background-color: var(--figma-color-bg-selected);
    }
  }

  &[variant="ghost"][disabled]:not([disabled="false"]) {
    background-color: transparent;
  }

  &[variant="link"] {
    color: var(--figma-color-text-brand);
  }

  /* Variant: Secondary */
  &[variant="secondary"] {
    border: 1px solid var(--figma-color-border);
    padding: 0 calc(var(--spacer-2) - 1px);
    background: none;
    color: var(--figma-color-text);

    &:active {
      background-color: var(--figma-color-bg-secondary);
    }
  }

  /* Variant: Input */
  &[variant="input"] {
    background-color: var(--figma-color-bg-secondary);
    box-shadow: none;
  }

  /* Icon only */
  &[icon] {
    width: var(--spacer-4);
    padding: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--spacer-4);
    &[size="compact"] {
      width: var(--spacer-3);
      flex-basis: var(--spacer-3);
    }
  }

  /* Disabled */
  &[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: transparent;
    }
  }

  /* Size */
  &[size="large"],
  &[size="large"] > button {
    height: var(--spacer-5);
  }

  &[size="large"][icon],
  &[size="large"][icon] > button {
    width: var(--spacer-5);
  }

  /* Full width */
  &[full] {
    width: 100%;
  }

  /* Block button */
  &[inline="false"],
  &[inline="false"] > button {
    display: flex;
    width: 100%;
    justify-content: left;
    height: auto;
    text-align: left;
    align-items: center;
    padding: var(--spacer-1) var(--spacer-2);
  }

  &[type="select"],
  &[type="upload"] {
    position: relative;
    overflow: hidden;
    > select,
    > input,
    > fig-dropdown {
      position: absolute;
      inset: 0;
      opacity: 0;
      appearance: none;
    }
  }

  &[inline="false"] {
    padding: 0;
  }

  &[selected]:not([selected="false"]) {
    &,
    &:hover {
      color: var(--figma-color-icon-brand);
      background-color: var(--figma-color-bg-selected);
    }
  }

  &:focus,
  &:focus-within {
    &:not(:active) {
      outline: 0;
      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    }
  }
}

/* Combo button */
.fig-button-combo,
fig-button-combo,
.fig-input-combo,
fig-input-combo {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0px;
  & > * {
    &: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-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;
    }
  }
}

/* Tabs */
fig-tab,
.fig-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding: 0 var(--spacer-2);
  appearance: none;
  border: 0;
  cursor: default;
  gap: 0 !important;
  user-select: none;
  border-radius: var(--radius-medium);
  color: var(--figma-color-text-secondary);
  position: relative;

  &[label] {
    &::after {
      content: attr(label);
      color: var(--figma-color-text-secondary);
      content: attr(label);
      height: 0 !important;
      width: auto !important;
      visibility: hidden;
      overflow: hidden;
      user-select: none;
      pointer-events: none;
      font-weight: var(--body-medium-strong-fontWeight);
    }
  }

  &:has(:checked),
  &[selected]:not([selected="false"]) {
    background-color: var(--figma-color-bg-secondary);
    font-weight: var(--body-medium-strong-fontWeight);
    color: var(--figma-color-text);
  }

  &:hover {
    background-color: var(--figma-color-bg-secondary);
  }

  & [type="radio"] {
    position: absolute;
    inset: 0;
    border-radius: 0;
    opacity: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
}

fig-tabs,
.tabs {
  display: flex;
  gap: var(--spacer-2);
}

/* Avatar */
fig-avatar,
.fig-avatar {
  --size: 1.5rem;
  width: var(--size);
  display: inline-grid;
  place-items: center;
  height: var(--size);
  border-radius: 100%;
  border: 0;
  background: var(--figma-color-bg-brand);
  overflow: hidden;
  color: var(--figma-color-icon-onbrand);

  img {
    width: var(--size);
    height: var(--size);
    position: absolute;
    border-radius: 100%;
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    &:not([src]) {
      background: var(--checkerboard);
    }
  }
  &[borderless] img {
    box-shadow: none;
  }

  &:has(img[src]) {
    background: none;
  }
  &::after {
    content: attr(initials);
  }
  &[size="large"] {
    --size: 3rem;
  }
}

/* Color input */
input[type="color"] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  padding: 0.3125rem;
  flex-shrink: 0;
  box-sizing: content-box;
  border-radius: var(--radius-medium);
  background-color: var(--figma-color-bg-secondary);
  display: inline-grid;

  &:focus {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    outline: 0;
  }

  &::-webkit-color-swatch-wrapper {
    padding: 0;
    border: 0;
    appearance: none;
    border-radius: 0.125rem;
    background: var(--checkerboard);
    overflow: hidden;
    grid-area: 1/1;
    outline: 0;
  }

  &::-webkit-color-swatch {
    padding: 0;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    border-radius: 0.125rem;
    mask-image: linear-gradient(
      to right,
      black 0%,
      black 50%,
      rgba(0, 0, 0, var(--alpha)) 50%
    );
  }
}

input[type="color"] {
  &::-moz-color-swatch {
    border-radius: 0.125rem;
    padding: 0;
    border: 0;
    appearance: none;
    mask-image: linear-gradient(
      to right,
      black 0%,
      black 50%,
      rgba(0, 0, 0, var(--alpha)) 50%
    );
    border-radius: 0.125rem;
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
  }
}

fig-chit {
  --gradient-color-1: #ff90ff;
  --gradient-color-2: #0000ff;
  --size: 1.5rem;
  display: inline-grid;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-medium);

  &::before,
  &::after,
  input {
    grid-area: 1/1;
  }

  &[selected]:not([selected="false"])::before {
    content: "";
    width: var(--size);
    height: var(--size);
    z-index: 1;
    border-radius: var(--radius-medium);
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
  }

  &[size="large"] {
    --size: 1.75rem;

    &[type="gradient"]::after,
    &[type="image"]::after,
    &[type="color"]::after,
    input[type="color"] {
      padding: 0;
      width: var(--size);
      height: var(--size);
      border-radius: var(--radius-medium);
    }
    &[selected]:not([selected="false"])::before {
      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected),
        inset 0 0 0 3px var(--figma-color-bg);
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
      border-radius: var(--radius-medium);
    }

    input[type="color"]::-webkit-color-swatch {
      border-radius: var(--radius-medium);
    }

    input[type="color"]::-moz-color-swatch {
      border-radius: var(--radius-medium);
    }
  }

  &[disabled="true"] {
    input {
      pointer-events: none;
    }
  }

  &[type="gradient"],
  &[type="image"] {
    &::after {
      content: "";
      width: 0.875rem;
      height: 0.875rem;
      background-image: var(--src);
      border-radius: 0.125rem;
      background-size: cover;
      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    }
    &::after,
    input {
      grid-area: 1/1;
      place-self: center;
    }
    input[type="color"] {
      opacity: 0;
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
      background: none;
    }
    input[type="color"]::-moz-color-swatch {
      opacity: 0;
    }
    input[type="color"]::-webkit-color-swatch {
      opacity: 0;
    }
  }

  &[type="image"] {
    &:not([src])::after {
      background: var(--checkerboard);
    }
  }
  &[type="gradient"] {
    &[variant="linear"]::after {
      --gradient: linear-gradient(
        to bottom,
        var(--gradient-color-1),
        var(--gradient-color-2)
      );
    }
    &[variant="angular"]::after {
      --gradient: conic-gradient(
        from 180deg,
        var(--gradient-color-1),
        var(--gradient-color-2)
      );
    }
    &[variant="radial"]::after {
      --gradient: radial-gradient(
        circle,
        var(--gradient-color-1),
        var(--gradient-color-2)
      );
    }
    &::after {
      background: var(--gradient);
    }
  }
}

/* Fig Image */
fig-image {
  --image-size: 2rem;
  display: inline-grid;
  place-items: center;
  width: var(--image-size);
  height: var(--image-size);
  > * {
    grid-area: 1/1;
  }
  fig-chit {
    --size: var(--image-size) !important;
  }
  fig-button {
    opacity: 0;
    pointer-events: none;
  }
  &:not([src]):not([src=""]) fig-button,
  &:hover fig-button {
    opacity: 1;
    pointer-events: all;
  }
  &[size="medium"] {
    --image-size: 4rem;
  }
  &[size="large"] {
    --image-size: 8rem;
  }
}

/* Combo input */
.input-combo {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;

  & > * {
    &: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;
    }
  }
}

/* Switch */
input[type="checkbox"].switch {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
  padding: 0;
  width: 2rem;
  height: 1rem;
  left: 0;
  top: 0;
  margin: 0;
  background: transparent;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--figma-color-bg-secondary);
  transition: var(--input-transition);
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
}

input[type="checkbox"].switch:after {
  content: "";
  background-color: var(--figma-color-icon-onbrand);
  width: calc(1rem - 2px);
  height: calc(1rem - 2px);
  border-radius: 0.5rem;
  margin: 1px;
  transform: translate(calc(-0.5rem));
  transition: var(--input-transition);
  box-shadow: var(--handle-shadow);
}

input[type="checkbox"].switch[indeterminate="true"]:after {
  width: 0.5rem;
  height: 0.125rem;
  transform: none;
}

input[type="checkbox"].switch[indeterminate="true"],
input[type="checkbox"].switch:checked {
  background-color: var(--figma-color-bg-brand);
}

input[type="checkbox"].switch:checked:after {
  transform: translate(0.5rem);
}

input[type="checkbox"].switch:disabled {
  background-color: var(--figma-color-bg-secondary);
  cursor: not-allowed;
  &:after {
    background-color: var(--figma-color-bg);
  }
}

input[type="checkbox"].switch:focus {
  outline: 0;
}

input[type="checkbox"].switch:checked:focus {
  outline: 0;
}

/* Checkbox */
input[type="checkbox"]:not(.switch) {
  appearance: none;
  border-radius: var(--radius-medium);
  width: 1rem;
  height: 1rem;
  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
  background-color: var(--figma-color-bg-secondary);
  vertical-align: middle;

  &:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
  }

  &:checked {
    background-color: var(--figma-color-bg-brand);
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
  }

  &:focus {
    outline: 0;

    &:not(:checked) {
      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    }
  }
}
@media (prefers-color-scheme: light) {
  input[type="checkbox"]:not(.switch):hover {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
  }
}

label.checkbox:has([type="checkbox"]) {
  padding-left: 1.5rem;

  & [type="radio"] {
    margin-left: -1.5rem;
  }
}

/* Radio */
input[type="radio"] {
  appearance: none;
  border-radius: 0.5rem;
  width: 1rem;
  height: 1rem;
  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
  background-color: var(--figma-color-bg-secondary);
  vertical-align: middle;
  margin: 0;
  display: inline-grid;
  place-content: center;

  &:checked {
    background-color: var(--figma-color-bg-brand);
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);

    &::after {
      transform: scale(1);
    }
  }

  &:focus {
    outline: 0;

    &:not(:checked) {
      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    }
  }

  &:hover:not(:checked) {
    &::after {
      transform: scale(1);
      opacity: 0.25;
      background-color: var(--figma-color-icon);
    }
  }

  &::after {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 100%;
    background-color: var(--figma-color-icon-onbrand);
    transform: scale(0);
    box-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
      0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
      0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
  }
}

label.radio:has([type="radio"]) {
  padding-left: 1.5rem;

  & [type="radio"] {
    margin-left: -1.5rem;
  }
}

/* Fieldset */
fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 0;
  align-items: start;
  padding: var(--spacer-2) 0;

  & > legend {
    margin-top: 0.125rem;
    font-weight: 500;
    font-size: 0.625rem;
    line-height: 0.875rem;
    color: var(--figma-color-text-secondary);
  }

  & > label {
    display: grid;
    width: 100%;
    grid-template-columns: 4rem 1fr;
    column-gap: var(--spacer-2);
    align-items: center;
  }
}

/* Details */
details {
  & > summary {
    font-weight: var(--body-medium-strong-fontWeight);
    cursor: default;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0;
    height: var(--spacer-6);
    user-select: none;
    color: var(--figma-color-text-secondary);

    &::before {
      content: "";
      mask-image: var(--icon-chevron);
      display: inline-flex;
      background: var(--figma-color-text-secondary);
      align-items: start;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      transform: rotate(-90deg);
      transition: transform var(--transition-duration)
        var(--transition-timing-function);
    }
    &::-webkit-details-marker {
      display: none;
    }
    &::marker {
      content: "";
    }
  }

  & > summary:hover,
  &[open] > summary {
    color: inherit;

    &::before {
      opacity: 1;
    }
  }

  &[open] {
    & > summary::before {
      transform: rotate(0deg);
    }
  }
}

.figma-light details > summary:before {
  content: var(--icon-chevron);
}

/* Sliders */
.fig-slider,
fig-slider {
  --slider-field-height: 1.5rem;
  --slider-height: 1rem;
  --slider-thumb-size: var(--slider-height);
  --slider-percent: calc(var(--slider-complete) * 100%);
  --start-percent: calc(var(--default, 0) * 100%);
  --slider-tick-size: calc(var(--slider-height) / 4);
  --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
      var(--figma-color-icon-onbrand),
    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
  --slider-handle-shadow-focus: inset 0 0 0 4px var(--figma-color-icon-onbrand),
    inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
    0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
    0px 0px 0.5px 0px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--figma-color-border-selected);
  --slider-transition: all 0.1s ease-in-out;
  --handle-transition: var(--slider-transition);

  display: inline-flex;
  align-items: center;
  position: relative;
  height: var(--slider-field-height);
  transition: var(--slider-transition);

  .fig-slider-input-container {
    height: var(--slider-height);
    position: relative;
    display: block;
    width: 100%;
    transition: var(--slider-transition);
    background: var(--figma-color-bg-secondary);
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);

    /* Track */
    &::before {
      content: "";
      background: var(--figma-color-bg-brand);
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      bottom: 0;
      border-radius: 0.5rem;
      min-width: var(--slider-height);
      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
      width: calc(
        var(--slider-percent) + (1 - var(--slider-complete)) *
          var(--slider-height)
      );
      max-width: 100%;
    }
  }
  &[type="stepper"] {
    .fig-slider-input-container {
      &::before {
        display: none;
      }
    }
  }

  &[type="delta"] {
    datalist option {
      position: absolute;
      margin: 0;
      left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
      top: calc(50% - var(--slider-tick-size) / 2);
    }
    .fig-slider-input-container {
      &::before {
        --left-start: calc(var(--start-percent) - var(--slider-height) / 2);
        left: min(
          var(--left-start),
          var(--slider-percent) - (var(--slider-complete)) *
            var(--slider-height)
        );
        --width: calc(var(--slider-percent) - var(--start-percent));
        --abs-width: max(
          var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) *
            var(--slider-height),
          -1 * var(--width) + var(--slider-height) / 2 + (
              var(--slider-complete)
            ) * var(--slider-height)
        );
        width: var(--abs-width);
        --delta: calc(var(--slider-complete) - var(--default));
        --abs-delta: max(var(--delta), -1 * var(--delta));
        opacity: calc(var(--abs-delta) * 100);
      }
    }
  }

  &[type="hue"],
  &[type="opacity"] {
    .fig-slider-input-container {
      &::before {
        display: none;
      }
    }
  }

  /* Chromium */
  input[type="range"] {
    height: var(--slider-height);
    appearance: none;
    -webkit-appearance: none;
    border-radius: calc(var(--slider-height) / 2);
    display: block;
    width: 100%;
    background-color: transparent;
    transition: var(--slider-transition);
    position: relative;

    &:active::-webkit-slider-thumb {
      cursor: grabbing;
      cursor: -webkit-grabbing;
    }

    &:focus {
      outline: none;
    }

    &::-webkit-slider-thumb {
      appearance: none;
      background: transparent;
      -webkit-appearance: none;
      transition: var(--handle-transition);
      border-radius: 100%;
      height: var(--slider-thumb-size);
      width: var(--slider-thumb-size);
      margin-top: calc(var(--slider-height) / 2 - var(--slider-thumb-size) / 2);
      aspect-ratio: 1;
      border: none;
      position: relative;
      z-index: 1;
      cursor: grab;
      cursor: -webkit-grab;
      box-shadow: var(--slider-handle-shadow);
    }

    &:disabled {
      cursor: not-allowed;

      &::-webkit-slider-runnable-track {
        background: linear-gradient(
          to right,
          var(--figma-color-bg-secondary) 0%,
          var(--figma-color-bg-secondary) var(--slider-percent),
          var(--figma-color-bg) var(--slider-percent)
        );
      }

      &::-webkit-slider-thumb {
        box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
      }
    }

    &::-webkit-slider-runnable-track {
      height: var(--slider-height);
      background-color: transparent;
      transition: var(--slider-transition);
      border-radius: calc(var(--slider-height) / 2);
    }

    &.hue::-webkit-slider-runnable-track {
      background: var(--bg-hue);
    }

    &.opacity::-webkit-slider-runnable-track {
      background: linear-gradient(to right, transparent, var(--color)),
        var(--checkerboard);
    }
  }

  /* Firefox */
  input[type="range"] {
    height: var(--slider-height);
    appearance: none;
    -moz-appearance: none;
    border-radius: calc(var(--slider-height) / 2);
    display: block;
    width: 100%;
    background-color: transparent;
    transition: var(--slider-transition);
    position: relative;

    &:foc