: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);
}

:root.figma-dark {
  --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);
  --handle-color: #fff;

  --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");
  --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");

  /* 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;
}

:root.figma-dark {
  --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);
}

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;
    -webkit-appearance: none;
    margin: 0;
  }
}

fig-input-text {
  &:has([slot="append"]) input[type="number"] {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      display: none;
      margin: 0;
      opacity: 0;
    }
  }
  &[steppers="true"] {
    input[type="number"]::-webkit-inner-spin-button {
      display: block;
      opacity: 1;
      height: 1.5rem;
      width: 1.5rem;
      margin-right: calc(var(--spacer-2) * -1);
      background-color: var(--figma-color-text-secondary);
      mask-image: var(--icon-steppers);
    }
  }
}

/* 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;
  }
}

/* Not enough support for this yet 
@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;
      }
      &:not(:disabled) {
        &: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);
        }
      }
    }
    option[hidden="true"]:first-child + optgroup {
      margin-top: 0;
      padding-top: 0;
      &:before {
        display: none;
      }
    }
  }
  ::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;
}

/* 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;
    color: var(--figma-color-text);
  }

  /* Variant: Overlay (for on top of content) */
  &[variant="overlay"] {
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
    box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);

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

  /* 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);
    padding: 0 var(--spacer-3);
  }

  &[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);
    }
  }
  svg {
    *[fill] {
      fill: currentColor;
    }
    *[stroke][stroke!="none"] {
      stroke: currentColor;
    }
  }
  &:has(svg:first-child):not([icon]) {
    padding-left: var(--spacer-1);
  }
}

/* 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-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;
    }
  }
}

/* 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);
}

fig-tab-content,
.fig-tab-content {
  display: none;
}

/* 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: contain;
      background-position: center center;
      background-repeat: no-repeat;
      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);
  aspect-ratio: 1 / 1;
  > * {
    grid-area: 1/1;
  }
  fig-chit {
    --size: var(--image-size) !important;
  }
  &:not([src]):not([src=""]) fig-button,
  &:hover fig-button {
    opacity: 1;
    pointer-events: all;
  }
  &[size="medium"] {
    --image-size: 4rem;
  }
  &[size="large"] {
    --image-size: 8rem;
  }
  &[aspect-ratio="auto"] {
    aspect-ratio: var(--aspect-ratio);
    height: auto;
    fig-chit,
    fig-chit::after,
    input {
      height: auto !important;
      aspect-ratio: var(--aspect-ratio) !important;
    }
  }
  > div {
    display: flex;
    gap: var(--spacer-2);
    opacity: 0;
    pointer-events: none;
  }
  &:not([src]):not([src=""]) > div,
  &:hover > div {
    opacity: 1;
    pointer-events: all;
  }
  fig-button[type="download"] {
    display: none;
  }
  &[src]:not([src=""]) {
    fig-button[type="download"] {
      display: inline-flex;
    }
  }
}

/* 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(--handle-color);
  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) {
  --size: 1rem;
  --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='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' opacity='1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' /%3E%3C/svg%3E%0A");
  appearance: none;
  border-radius: var(--radius-medium);
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1/1;
  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
  background-color: var(--figma-color-bg-secondary);
  vertical-align: middle;

  &::after {
    content: "";
    width: var(--size);
    height: var(--size);
    background-color: transparent;
    mask-image: var(--checkmark);
  }
  &:hover:not(:checked) {
    &::after {
      opacity: 0.25;
      background-color: var(--figma-color-icon);
    }
  }

  &:checked {
    background-color: var(--figma-color-bg-brand);
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
    background-image: var(--light-checkmark);
    &::after {
      background-color: var(--figma-color-icon-onbrand);
    }
  }

  &:focus {
    outline: 0;

    &:not(:checked) {
      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    }
  }
}
:root.figma-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(--handle-color),
    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(--handle-color),
    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;

    &:focus {
      outline: none;
    }

    &:active::-moz-range-thumb {
      cursor: grabbing;
      cursor: -webkit-grabbing;
    }

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

    &:disabled {
      cursor: not-allowed;

      &::-moz-range-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)
        );
      }

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

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

    &.hue::-moz-range-track {
      background: var(--bg-hue);
    }

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

  datalist {
    position: absolute;
    inset: 0;
    top: 0;
    display: flex;
    transition: var(--slider-transition);
    background: transparent;
    align-items: center;
    margin: 0;
    border: 0;
    appearance: none;
    padding: 0 calc((var(--slider-height) / 2) - var(--slider-tick-size) / 2);
    height: var(--slider-height);
    pointer-events: none;
    justify-content: space-between;
    width: 100%;

    & option {
      appearance: none;
      width: var(--slider-tick-size);
      height: var(--slider-tick-size);
      aspect-ratio: 1;
      padding: 0;
      border: 0;
      border-radius: 100%;
      font-size: 0;
      background: var(--figma-color-icon-tertiary);
      display: block;
      &[default] {
        background: var(--figma-color-icon);
      }

      &:first-child:last-child {
        margin: 0 auto;
      }
    }
  }

  &[variant="minimal"] {
    --slider-height: 0.375rem;
    --slider-thumb-size: 0.75rem;
    --slider-tick-size: calc(var(--slider-height) / 2);
    --handle-transition: none;
    --slider-transition: none;
    --slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
        var(--handle-color),
      0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
      var(--figma-elevation-200);

    .fig-slider-input-container {
      height: var(--slider-height);
      position: relative;
      display: block;
      width: 100%;
      box-shadow: none;
      background: var(--figma-color-bg-tertiary);

      /* Track */
      &::before {
        box-shadow: none;
        background: var(--figma-color-text-tertiary);
      }

      input[type="range"] {
        &::-webkit-slider-runnable-track {
          box-shadow: none;
        }
      }
    }
    fig-input-text {
      height: calc(var(--slider-height) * 2);
      background-color: transparent;
    }

    &:hover,
    &:focus-within {
      .fig-slider-input-container {
        background: var(--figma-color-bg-secondary);
        &::before {
          box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
          background: var(--figma-color-bg-brand);
        }
      }
      input[type="range"] {
        &::-webkit-slider-runnable-track {
          box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
        }
      }
      fig-input-text {
        height: auto;
      }
    }
  }
}

/* Popovers/Dialogs */
.dialog,
dialog,
.popover,
[popover] {
  padding: 0;
  outline: 0;
  border: 0;
  inset: auto;
  color: var(--figma-color-text);
  border-radius: var(--radius-large, 0.8125rem);
  background: var(--figma-color-bg);
  min-width: var(--popover-min-width);

  box-shadow: var(--figma-elevation-500-modal-window);

  footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacer-2);
    gap: var(--spacer-2);
  }
  p {
    padding: 0 var(--spacer-3);
  }

  &:popover-open {
    display: block;
    outline: none !important;
  }

  & header {
    height: var(--spacer-6);
    margin: 0;
    padding: var(--spacer-2);
    display: flex;
    align-items: center;
    font-weight: var(--body-medium-strong-fontWeight);
    box-shadow: inset 0 -1px 0 0 var(--figma-color-border);

    & h3 {
      font: inherit;
    }

    & > :first-child {
      padding-left: var(--spacer-2);
    }
  }

  &[tooltip] {
    color: var(--color-tooltip);
    background-color: var(--bg-tooltip);
    padding: var(--spacer-1) var(--spacer-2);
    line-height: 1rem !important;
    box-sizing: content-box;
    min-width: var(--popover-min-width);
    max-width: var(--popover-min-width);
    /*top: calc(anchor(top) - 1ch - (var(--spacer-1) * 2 + 1rem));*/
    top: anchor(top);
    left: anchor(center);
    /*transform: translate(-50%,-100%);*/

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    border-radius: var(--radius-medium, 0.3125rem);
    box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
      0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

    @supports (-webkit-line-clamp: 2) {
      white-space: initial;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &:popover-open {
      display: inline-block;

      @supports (-webkit-line-clamp: 2) {
        display: -webkit-box;
      }

      min-width: 0;
    }
  }
}
dialog[is="fig-dialog"] {
  --offset: 1rem;
  --translate-x: -50%;
  --translate-y: -50%;
  --z-index: 999999;

  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  z-index: var(--z-index);
  transform: translate(var(--translate-x), var(--translate-y));

  &[position*="bottom"] {
    bottom: var(--offset);
    top: auto;
    --translate-y: 0;
  }
  &[position*="top"] {
    top: var(--offset);
    bottom: auto;
    --translate-y: 0;
  }
  &[position*="right"] {
    right: var(--offset);
    left: auto;
    --translate-x: 0;
  }
  &[position*="left"] {
    left: var(--offset);
    right: auto;
    --translate-x: 0;
  }
}

/* Tooltip */
fig-tooltip,
fig-popover {
  display: contents;
}
.fig-tooltip {
  inset: unset;
  display: inline-block;
  color: var(--color-tooltip);
  background-color: var(--bg-tooltip);
  padding: var(--spacer-1) var(--spacer-2);
  line-height: 1rem !important;
  font-weight: inherit;
  border-radius: var(--radius-medium, 0.3125rem);
  max-width: 180px;
  width: max-content;

  & > span {
    text-wrap: balance;
    max-height: 2.5rem;
    overflow-y: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    text-overflow: ellipsis;
    width: auto;
  }

  &:after {
    content: "";
    background-color: var(--bg-tooltip);
    clip-path: path(
      "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
    );
    width: 1rem;
    height: 6px;
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    z-index: 2;
    transform: translate(-50%);
  }

  &[position="bottom"] {
    &:after {
      top: 1px;
      transform: translate(-50%, -100%) scaleY(-1);
    }
  }
}

.fig-tooltip,
.fig-popover {
  overflow: visible;
  box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
  filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
    drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));

  &:after {
    content: "";
    background-color: inherit;
    clip-path: path(
      "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
    );
    width: 1rem;
    height: 6px;
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    z-index: 2;
    transform: translate(-50%);
  }

  &[position="bottom"] {
    &:after {
      top: 1px;
      transform: translate(-50%, -100%) scaleY(-1);
    }
  }
}

/* UI Icons */
fig-icon {
  display: block;
}

fig-icon.close {
  width: 1rem;
  height: 1rem;
  background-color: var(--figma-color-text);
  clip-path: path(
    "M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z"
  );
}

/* Web Components */
fig-button,
fig-popover,
fig-content,
fig-slider,
fig-switch,
fig-input-color,
fig-checkbox,
fig-radio,
fig-tab,
fig-tabs {
  display: inline-flex;
  gap: var(--spacer-2);
  user-select: none;

  &[full] {
    display: flex;
    width: 100%;
  }
}

fig-checkbox,
fig-radio {
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;

  & label span {
    vertical-align: middle;
  }
}

fig-switch {
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

fig-input-color {
  --alpha: 1;
}

fig-header {
  height: var(--spacer-6);
  margin: 0;
  padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
  gap: 0.25rem;

  & h3 {
    font-weight: var(--body-medium-strong-fontWeight);
    flex-grow: 1;
  }

  &[borderless] {
    box-shadow: none;
  }
}

fig-content {
  padding: var(--spacer-2) 0;
  display: block;
}

vstack,
.vstack,
[vstack] {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--spacer-2);
  flex-wrap: wrap;
}

hstack,
.hstack,
[hstack] {
  display: flex;
  gap: var(--spacer-2);
  align-items: start;
  flex-wrap: nowrap;
}

fig-input-text {
  background-color: var(--figma-color-bg-secondary);
  border: 0;
  border-radius: var(--radius-medium);
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  user-select: all;
  gap: 0;

  &[multiline] {
    display: block;
    display: flex;
  }
  &[autoresize] input,
  &[autoresize] textarea {
    field-sizing: content;
  }
  &[resizable] input,
  &[resizable] textarea {
    resize: both;
  }
  &[resizable]:has(textarea[style*="width"]),
  &[resizable]:has(textarea[style*="height"]),
  &[resizable]:has(input[style*="width"]),
  &[resizable]:has(input[style*="height"]) {
    flex: unset;
  }

  & label,
  & [slot] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  & [slot] {
    user-select: none;
    width: 1.5rem;
    color: var(--figma-color-text-secondary);
  }

  & [slot="prepend"] {
    padding-right: 0;
    margin-right: calc(var(--spacer-2) * -1);
  }

  & [slot="append"] {
    padding-left: 0;
    margin-left: calc(var(--spacer-2) * -1);
  }

  & input {
    background-color: transparent !important;
    flex: 1;

    &:focus,
    &:active {
      box-shadow: none !important;
    }
  }

  &:has(input:focus) {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    outline: 0;
  }
  /* Disabled */
  &[disabled]:not([disabled="false"]) {
    background-color: var(--figma-color-bg);
    pointer-events: none;
    cursor: not-allowed;
    color: var(--figma-color-text-disabled);
    box-shadow: inset 0 0 0 1px var(--figma-color-border-disabled);
    & [slot] {
      color: var(--figma-color-text-disabled);
    }
  }
}

fig-input-color {
  & fig-input-text:not([type]),
  & fig-input-text[type="text"] {
    min-width: 6em;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;

    & input[type="text"] {
      width: 100%;
      text-transform: uppercase;
    }
  }

  & fig-input-text[type="number"] {
    width: 3.5rem;
    display: inline-flex;
  }
}

fig-slider {
  display: flex;

  & .slider {
    flex-grow: 1;
  }

  & fig-input-text[type="number"] {
    width: 3.5rem;
  }
}

fig-field,
.fig-field {
  display: flex;
  padding: var(--spacer-1) var(--spacer-3);
  margin: 0;
  flex-direction: column;
  gap: 0;
  align-items: start;

  & > [full] {
    flex: 1;
  }

  & > label {
    flex: 0;
    padding: var(--spacer-1) 0;
    display: flex;
    justify-content: space-between;
    min-height: calc(1rem + var(--spacer-1) * 2);
    align-items: center;
    width: 100%;
  }

  &[direction="horizontal"] {
    gap: var(--spacer-2);
    align-items: start;
    flex-direction: row;
    width: auto;

    & > label {
      min-width: 4rem;
    }
  }
}

fig-spinner {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  background-color: var(--figma-color-icon-oncomponent-tertiary);
  clip-path: path(
    "M15.9995 7.86066C16.0271 9.44267 15.585 10.9973 14.729 12.3281C13.8731 13.6588 12.6417 14.7058 11.1907 15.3368C9.73968 15.9677 8.13415 16.1542 6.57716 15.8726C5.02016 15.591 3.58161 14.8541 2.44344 13.755C1.30526 12.6559 0.518574 11.2439 0.182856 9.69769C-0.152862 8.15147 -0.0225313 6.54042 0.557366 5.06826C1.13726 3.59611 2.14068 2.32898 3.44073 1.4271C4.74079 0.525221 6.27908 0.0291073 7.86109 0.00149397L7.87922 1.04037C6.50268 1.06439 5.16418 1.49607 4.03298 2.28081C2.90177 3.06556 2.02868 4.16812 1.5241 5.44907C1.01952 6.73002 0.906114 8.13183 1.19823 9.47724C1.49034 10.8226 2.17486 12.0512 3.16521 13.0076C4.15556 13.9639 5.40727 14.6052 6.76204 14.8502C8.11682 15.0951 9.51382 14.9329 10.7764 14.3839C12.0389 13.8349 13.1104 12.9239 13.8552 11.766C14.5999 10.6081 14.9846 9.25533 14.9606 7.87879L15.9995 7.86066Z"
  );
  animation: fig-spinner-spin 1s linear infinite;
}

/* Segmented control */
.segmented-control,
fig-segmented-control {
  display: inline-flex;
  user-select: none;
  background-color: var(--figma-color-bg-secondary);
  border: 0;
  border-radius: var(--radius-medium);
  height: 1.5rem;
  padding: 1px;
  gap: 0;
  display: inline-flex;
  align-items: stretch;

  & fig-segment {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    appearance: none;
    color: var(--figma-color-text-secondary);
    padding: 0 var(--spacer-2);

    &[selected]:not([selected="false"]),
    &[selected="true"] {
      color: var(--figma-color-text);
      background-color: var(--figma-color-bg);
      border-radius: calc(var(--radius-medium) - 1px);
      box-shadow: 0 0 0 1px var(--figma-color-border);
    }
  }
}

fig-input-joystick {
  --size: 1.5rem;
  display: inline-flex;
  gap: var(--spacer-2);
  user-select: none;
  .fig-input-joystick-plane-container {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    &:focus {
      outline: 0;
    }
  }
  .fig-input-joystick-plane {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    &.dragging {
      cursor: grab;
      --size: 3rem;
      z-index: 2;
    }
  }
  .fig-input-joystick-plane > * {
    grid-area: 1/1;
  }
  .fig-input-joystick-guides {
    position: absolute;
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 0 0 1px var(--figma-color-border);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--figma-color-bg-secondary);

    &:before {
      content: "";
      position: absolute;
      height: 0;
      border-left: 1px solid var(--figma-color-border);
      height: calc(100% - 2px);
      top: 1px;
      left: calc(50% - 0.5px);
      pointer-events: none;
    }
    &:after {
      content: "";
      position: absolute;
      height: 0;
      border-top: 1px solid var(--figma-color-border);
      width: calc(100% - 2px);
      top: calc(50% - 0.5px);
      left: 1px;
      pointer-events: none;
    }
  }
  .fig-input-joystick-plane.dragging .fig-input-joystick-guides {
    background: linear-gradient(
        45deg,
        transparent calc(50% - 0.5px),
        var(--figma-color-border) calc(50% - 0.5px),
        var(--figma-color-border) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      ),
      linear-gradient(
        -45deg,
        transparent calc(50% - 0.5px),
        var(--figma-color-border) calc(50% - 0.5px),
        var(--figma-color-border) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      ),
      var(--figma-color-bg-secondary);
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
  }
  .fig-input-joystick-plane-container:focus .fig-input-joystick-guides {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
  }

  .fig-input-joystick-handle {
    position: absolute;
    z-index: 1;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--handle-color);
    box-shadow: var(--handle-shadow);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}

fig-input-angle {
  --size: 1.5rem;
  display: inline-flex;
  gap: var(--spacer-2);
  user-select: none;

  .fig-input-angle-plane {
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1/1;
    flex-shrink: 0;
    background-color: var(--figma-color-bg-secondary);
    border-radius: 100%;
    box-shadow: inset 0 0 0 1px var(--figma-color-border);
    &:focus,
    &.dragging {
      outline: 0;
      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
    }
  }
  .fig-input-angle-handle {
    display: inline-grid;
    place-items: center;
    grid-area: 1/1;
    width: calc(0.5rem + 2px);
    height: calc(0.5rem + 2px);
    &:before {
      content: "";
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      background: var(--handle-color);
      box-shadow: var(--handle-shadow);
      border-radius: 50%;
    }
  }
}

/* Utilities */

@keyframes fig-spinner-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}