@rogieking/figui3/components.css

A lightweight web components library for building Figma plugin and widget UIs with native look and feel

:root,
:host {
  color-scheme: light dark;

  /* Background Colors */
  --figma-color-bg: light-dark(#ffffff, #2c2c2c);
  --figma-color-bg-brand: light-dark(#0d99ff, #0c8ce9);
  --figma-color-bg-menu: light-dark(#ffffff, #1e1e1e);
  --figma-color-bg-menu-hover: #0c8ce9;
  --figma-color-bg-brand-hover: light-dark(#007be5, #0a6dc2);
  --figma-color-bg-brand-pressed: light-dark(#0768cf, #105cad);
  --figma-color-bg-brand-secondary: light-dark(#0768cf, #105cad);
  --figma-color-bg-brand-tertiary: light-dark(#e5f4ff, #394360);
  --figma-color-bg-component: light-dark(#9747ff, #8a38f5);
  --figma-color-bg-component-hover: light-dark(#8638e5, #7a2ed6);
  --figma-color-bg-component-pressed: light-dark(#8638e5, #7a2ed6);
  --figma-color-bg-component-secondary: light-dark(#7c2bda, #652ca8);
  --figma-color-bg-component-tertiary: light-dark(#f1e5ff, #473956);
  --figma-color-bg-danger: light-dark(#f24822, #e03e1a);
  --figma-color-bg-danger-hover: light-dark(#dc3412, #c4381c);
  --figma-color-bg-danger-pressed: light-dark(#dc3412, #c4381c);
  --figma-color-bg-danger-secondary: light-dark(#bd2915, #963323);
  --figma-color-bg-danger-tertiary: light-dark(#ffe2e0, #60332a);
  --figma-color-bg-disabled: light-dark(#d9d9d9, #757575);
  --figma-color-bg-disabled-secondary: #b3b3b3;
  --figma-color-bg-hover: light-dark(#f5f5f5, #383838);
  --figma-color-bg-inverse: light-dark(#2c2c2c, #ffffff);
  --figma-color-bg-onselected: light-dark(#bde3ff, #667799);
  --figma-color-bg-onselected-hover: light-dark(#bde3ff, #667799);
  --figma-color-bg-onselected-pressed: light-dark(#bde3ff, #667799);
  --figma-color-bg-pressed: light-dark(#f5f5f5, #383838);
  --figma-color-bg-secondary: light-dark(#f5f5f5, #383838);
  --figma-color-bg-selected: light-dark(#e5f4ff, #4a5878);
  --figma-color-bg-selected-hover: light-dark(#bde3ff, #536383);
  --figma-color-bg-selected-pressed: light-dark(#bde3ff, #536383);
  --figma-color-bg-selected-secondary: light-dark(#f2f9ff, #394360);
  --figma-color-bg-selected-strong: light-dark(#0d99ff, #0c8ce9);
  --figma-color-bg-selected-tertiary: light-dark(#f2f9ff, #394360);
  --figma-color-bg-success: light-dark(#14ae5c, #198f51);
  --figma-color-bg-success-hover: light-dark(#009951, #078348);
  --figma-color-bg-success-pressed: light-dark(#009951, #078348);
  --figma-color-bg-success-secondary: light-dark(#008043, #0a5c35);
  --figma-color-bg-success-tertiary: light-dark(#cff7d3, #476656);
  --figma-color-bg-tertiary: light-dark(#e6e6e6, #444444);
  --figma-color-bg-warning: light-dark(#ffcd29, #f3c11b);
  --figma-color-bg-warning-hover: light-dark(#ffc21a, #f2b50d);
  --figma-color-bg-warning-pressed: light-dark(#ffc21a, #f2b50d);
  --figma-color-bg-warning-secondary: light-dark(#fab815, #e4a711);
  --figma-color-bg-warning-tertiary: light-dark(#fff1c2, #5c4100);
  --figma-color-bg-switch: light-dark(#e6e6e6, #444444);

  /* Border Colors */
  --figma-color-border: light-dark(#e6e6e6, #444444);
  --figma-color-border-brand: light-dark(#bde3ff, #105cad);
  --figma-color-border-brand-strong: light-dark(#007be5, #7cc4f8);
  --figma-color-border-component: light-dark(#e4ccff, #652ca8);
  --figma-color-border-component-hover: light-dark(#9747ff, #8a38f5);
  --figma-color-border-component-strong: light-dark(#8638e5, #d6b6fb);
  --figma-color-border-danger: light-dark(#ffc7c2, #963323);
  --figma-color-border-danger-strong: light-dark(#dc3412, #fca397);
  --figma-color-border-disabled: light-dark(#e6e6e6, #444444);
  --figma-color-border-disabled-strong: light-dark(#0000004d, #ffffff66);
  --figma-color-border-menu: #383838;
  --figma-color-border-onbrand: light-dark(#007be5, #0a6dc2);
  --figma-color-border-onbrand-strong: #ffffff;
  --figma-color-border-oncomponent: light-dark(#8638e5, #7a2ed6);
  --figma-color-border-oncomponent-strong: #ffffff;
  --figma-color-border-ondanger: light-dark(#dc3412, #c4381c);
  --figma-color-border-ondanger-strong: #ffffff;
  --figma-color-border-onselected: light-dark(#bde3ff, #667799);
  --figma-color-border-onselected-strong: light-dark(#000000e5, #ffffffe5);
  --figma-color-border-onsuccess: light-dark(#009951, #078348);
  --figma-color-border-onsuccess-strong: #ffffff;
  --figma-color-border-onwarning: light-dark(#fab815, #e4a711);
  --figma-color-border-onwarning-strong: #000000e5;
  --figma-color-border-selected: light-dark(#0d99ff, #0c8ce9);
  --figma-color-border-selected-strong: light-dark(#007be5, #7cc4f8);
  --figma-color-border-strong: light-dark(#2c2c2c, #ffffffe5);
  --figma-color-border-success: light-dark(#aff4c6, #0a5c35);
  --figma-color-border-success-strong: light-dark(#009951, #79d297);
  --figma-color-border-warning: light-dark(#ffe8a3, #925711);
  --figma-color-border-warning-strong: light-dark(#b86200, #f7d15f);

  /* Icon Colors */
  --figma-color-icon: light-dark(#000000e5, #ffffff);
  --figma-color-icon-brand: light-dark(#007be5, #7cc4f8);
  --figma-color-icon-brand-pressed: light-dark(#0768cf, #0c8ce9);
  --figma-color-icon-brand-secondary: light-dark(#80caff, #0a6dc2);
  --figma-color-icon-brand-tertiary: light-dark(#bde3ff, #394360);
  --figma-color-icon-component: light-dark(#8638e5, #d1a8ff);
  --figma-color-icon-component-pressed: light-dark(#7c2bda, #d6b6fb);
  --figma-color-icon-component-secondary: light-dark(#c5b2dc, #7f699b);
  --figma-color-icon-component-tertiary: light-dark(#c5b2dc, #7f699b);
  --figma-color-icon-danger: light-dark(#f24822, #e03e1a);
  --figma-color-icon-danger-hover: light-dark(#bd2915, #fbbcb6);
  --figma-color-icon-danger-pressed: light-dark(#bd2915, #fbbcb6);
  --figma-color-icon-danger-secondary: light-dark(#f24822, #e03e1a);
  --figma-color-icon-danger-secondary-hover: light-dark(#f24822, #e03e1a);
  --figma-color-icon-danger-tertiary: light-dark(#f24822, #e03e1a);
  --figma-color-icon-disabled: light-dark(#0000004d, #ffffff66);
  --figma-color-icon-hover: light-dark(#000000e5, #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: light-dark(#ffffff, #2c2c2c);
  --figma-color-icon-oninverse: light-dark(#ffffffe5, #000000e5);
  --figma-color-icon-onselected: light-dark(#000000e5, #ffffff);
  --figma-color-icon-onselected-secondary: light-dark(#00000080, #ffffffb2);
  --figma-color-icon-onselected-strong: #ffffff;
  --figma-color-icon-onselected-tertiary: light-dark(#0000004d, #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: light-dark(#007be5, #0a6dc2);
  --figma-color-icon-secondary: light-dark(#00000080, #ffffffb2);
  --figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
  --figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
  --figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
  --figma-color-icon-selected-tertiary: light-dark(#007be5, #7cc4f8);
  --figma-color-icon-success: light-dark(#14ae5c, #198f51);
  --figma-color-icon-success-pressed: light-dark(#008043, #a1e8b9);
  --figma-color-icon-success-secondary: light-dark(#14ae5c, #198f51);
  --figma-color-icon-success-tertiary: light-dark(#14ae5c, #198f51);
  --figma-color-icon-tertiary: light-dark(#0000004d, #ffffff66);
  --figma-color-icon-tertiary-hover: light-dark(#000000e5, #ffffff);
  --figma-color-icon-warning: light-dark(#ffcd29, #f3c11b);
  --figma-color-icon-warning-pressed: light-dark(#b86200, #f7d15f);
  --figma-color-icon-warning-secondary: light-dark(#ffcd29, #f3c11b);
  --figma-color-icon-warning-tertiary: light-dark(#ffcd29, #f3c11b);

  /* Text Colors */
  --figma-color-text: light-dark(#000000e5, #ffffff);
  --figma-color-text-brand: light-dark(#007be5, #7cc4f8);
  --figma-color-text-brand-secondary: light-dark(#007be5, #7cc4f8);
  --figma-color-text-brand-tertiary: light-dark(#007be5, #7cc4f8);
  --figma-color-text-component: light-dark(#8638e5, #d1a8ff);
  --figma-color-text-component-pressed: light-dark(#7c2bda, #d6b6fb);
  --figma-color-text-component-secondary: light-dark(#c5b2dc, #7f699b);
  --figma-color-text-component-tertiary: light-dark(#c5b2dc, #7f699b);
  --figma-color-text-danger: light-dark(#dc3412, #fca397);
  --figma-color-text-danger-secondary: light-dark(#dc3412, #fca397);
  --figma-color-text-danger-tertiary: light-dark(#dc3412, #fca397);
  --figma-color-text-disabled: light-dark(#0000004d, #ffffff66);
  --figma-color-text-hover: light-dark(#000000e5, #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: light-dark(#ffffff, #2c2c2c);
  --figma-color-text-oninverse: light-dark(#ffffffe5, #000000e5);
  --figma-color-text-onselected: light-dark(#000000e5, #ffffffe5);
  --figma-color-text-onselected-secondary: light-dark(#00000080, #ffffffb2);
  --figma-color-text-onselected-strong: #ffffff;
  --figma-color-text-onselected-tertiary: light-dark(#0000004d, #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: light-dark(#00000080, #ffffffb2);
  --figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
  --figma-color-text-selection: rgba(13, 153, 255, 0.4);
  --figma-color-text-selected: light-dark(#007be5, #7cc4f8);
  --figma-color-text-selected-secondary: light-dark(#007be5, #7cc4f8);
  --figma-color-text-selected-tertiary: light-dark(#007be5, #7cc4f8);
  --figma-color-text-success: light-dark(#009951, #79d297);
  --figma-color-text-success-secondary: light-dark(#009951, #79d297);
  --figma-color-text-success-tertiary: light-dark(#009951, #79d297);
  --figma-color-text-tertiary: light-dark(#0000004d, #ffffff66);
  --figma-color-text-tertiary-hover: light-dark(#000000e5, #ffffff);
  --figma-color-text-warning: light-dark(#b86200, #f7d15f);
  --figma-color-text-warning-secondary: light-dark(#b86200, #f7d15f);
  --figma-color-text-warning-tertiary: light-dark(#b86200, #f7d15f);
  --figma-color-text-menu: #ffffff;
  --figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
  --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
}

:root,
:host {
  /* Typography & Sizing */
  --font-size: 16px;
  --font-family:
    "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir,
    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  --body-medium-fontSize: 0.6875rem;
  --body-large-fontSize: 0.8125rem;
  --body-letter-spacing: 0.055px;
  --body-medium-strong-fontWeight: 550;
  --body-large-strong-fontWeight: 500;
  --body-medium-fontWeight: 450;

  /* Spacing */
  --spacer-1: 0.25rem;
  --spacer-2: 0.5rem;
  --spacer-2-5: 0.75rem;
  --spacer-3: 1rem;
  --spacer-4: 1.5rem;
  --spacer-5: 2rem;
  --spacer-6: 2.5rem;

  /* Radii */
  --radius-none: 0;
  --radius-small: 0.125rem;
  --radius-medium: 0.3125rem;
  --radius-large: 0.8125rem;
  --figma-radius-none: var(--radius-none);
  --figma-radius-small: var(--radius-small);
  --figma-radius-medium: var(--radius-medium);
  --figma-radius-large: var(--radius-large);

  /* Transitions */
  --input-transition: all 0.08s ease-out;

  /* Misc UI */
  --popover-min-width: 15rem;
  --handle-color: #fff;
  --bg-selected: #f5f5f5;
  --bg-selected-active: #e5f4ff;
  --bg-tooltip: var(--figma-color-bg-menu);
  --color-tooltip: var(--figma-color-text);

  /* Transparent Backgrounds - use light-dark() */
  --figma-color-bordertranslucent: light-dark(
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1)
  );
  --figma-color-bg-transparent: light-dark(
    rgba(0, 0, 0, 0.05),
    rgba(255, 255, 255, 0.05)
  );
  --figma-color-bg-transparent-hover: light-dark(
    rgba(0, 0, 0, 0.05),
    rgba(255, 255, 255, 0.05)
  );
  --figma-color-bg-transparent-pressed: light-dark(
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1)
  );
  --figma-color-bg-transparent-secondary: light-dark(
    rgba(0, 0, 0, 0.2),
    rgba(255, 255, 255, 0.2)
  );

  /* Gradients */
  --eased-fade-stops:
    var(--figma-color-bg) 0%,
    color-mix(in oklch, var(--figma-color-bg) 99.9%, transparent) 10%,
    color-mix(in oklch, var(--figma-color-bg) 99.2%, transparent) 20%,
    color-mix(in oklch, var(--figma-color-bg) 97.3%, transparent) 30%,
    color-mix(in oklch, var(--figma-color-bg) 93.6%, transparent) 40%,
    color-mix(in oklch, var(--figma-color-bg) 87.5%, transparent) 50%,
    color-mix(in oklch, var(--figma-color-bg) 78.4%, transparent) 60%,
    color-mix(in oklch, var(--figma-color-bg) 65.7%, transparent) 70%,
    color-mix(in oklch, var(--figma-color-bg) 48.8%, transparent) 80%,
    color-mix(in oklch, var(--figma-color-bg) 27.1%, transparent) 90%,
    transparent 100%;

  --checkerboard: repeating-conic-gradient(
      rgba(0, 0, 0, 0.1) 0% 25%,
      rgba(255, 255, 255, 0.1) 0% 50%
    )
    0 0 / 0.66666rem 0.66666rem;
  --checkerboard-small: repeating-conic-gradient(
      rgba(0, 0, 0, 0.2) 0% 25%,
      rgba(255, 255, 255, 0.2) 0% 50%
    )
    0 0 / 0.5rem 0.5rem;
  --checkerboard-chit: repeating-conic-gradient(
      rgba(0, 0, 0, 0.2) 0% 25%,
      rgba(255, 255, 255, 0.2) 0% 50%
    )
    0 0 / 0.875rem 0.875rem;
    --checkerboard-slider: repeating-conic-gradient(
      rgba(0, 0, 0, 0.2) 0% 25%,
      rgba(255, 255, 255, 0.2) 0% 50%
    )
    0 0 / 0.375rem 0.375rem;
  --checkerboard-handle: repeating-conic-gradient(
      rgba(0, 0, 0, 0.2) 0% 25%,
      rgba(255, 255, 255, 0.2) 0% 50%
    )
    0 0 / 0.625rem 0.625rem;
  --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)
  );

  /* Icons - colorless shapes for use with mask-image */
  --icon-16-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  --icon-16-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
  --icon-16-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
  --icon-24-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
  --icon-24-eyedropper: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-add: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-minus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-back: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-16-arrow-left: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-24-forward: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-play: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 7.75274C7 6.4055 8.45837 5.56342 9.625 6.23712L17.2109 10.619C18.277 11.2349 18.2771 12.7745 17.2109 13.3904L9.625 17.7723C8.45843 18.4459 7.00013 17.6038 7 16.2566V7.75274ZM9.125 7.10333C8.625 6.8145 8 7.17532 8 7.75274V16.2566C8.00013 16.834 8.62505 17.1949 9.125 16.9061L16.7109 12.5242C17.1107 12.2933 17.1106 11.7162 16.7109 11.4852L9.125 7.10333Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-24-pause: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.65332 6.00781C10.4097 6.08461 11 6.72334 11 7.5V16.5C11 17.2767 10.4097 17.9154 9.65332 17.9922L9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V7.5C6 6.67157 6.67157 6 7.5 6H9.5L9.65332 6.00781ZM16.6533 6.00781C17.4097 6.08461 18 6.72334 18 7.5V16.5C18 17.2767 17.4097 17.9154 16.6533 17.9922L16.5 18H14.5C13.6716 18 13 17.3284 13 16.5V7.5C13 6.67157 13.6716 6 14.5 6H16.5L16.6533 6.00781ZM7.5 7C7.22386 7 7 7.22386 7 7.5V16.5C7 16.7761 7.22386 17 7.5 17H9.5C9.77614 17 10 16.7761 10 16.5V7.5C10 7.22386 9.77614 7 9.5 7H7.5ZM14.5 7C14.2239 7 14 7.22386 14 7.5V16.5C14 16.7761 14.2239 17 14.5 17H16.5C16.7761 17 17 16.7761 17 16.5V7.5C17 7.22386 16.7761 7 16.5 7H14.5Z' fill='currentColor'/%3E%3C/svg%3E");  
  --icon-24-search: 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.5 6C14.5376 6 17 8.46243 17 11.5C17 12.8387 16.5206 14.0648 15.7256 15.0186L17.8535 17.1465C18.0488 17.3417 18.0488 17.6582 17.8535 17.8535C17.6583 18.0486 17.3417 18.0487 17.1465 17.8535L15.0186 15.7256C14.0648 16.5206 12.8387 17 11.5 17C8.46243 17 6 14.5376 6 11.5C6 8.46243 8.46243 6 11.5 6ZM11.5 7C9.01472 7 7 9.01472 7 11.5C7 13.9853 9.01472 16 11.5 16C13.9853 16 16 13.9853 16 11.5C16 9.01472 13.9853 7 11.5 7Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-close: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1464 4.14645C11.3417 3.95118 11.6582 3.95118 11.8534 4.14645C12.0487 4.34171 12.0487 4.65822 11.8534 4.85348L8.70696 7.99996L11.8534 11.1464C12.0487 11.3417 12.0487 11.6582 11.8534 11.8535C11.6582 12.0487 11.3417 12.0487 11.1464 11.8535L7.99993 8.70699L4.85345 11.8535C4.65819 12.0487 4.34168 12.0487 4.14642 11.8535C3.95115 11.6582 3.95115 11.3417 4.14642 11.1464L7.2929 7.99996L4.14642 4.85348C3.95115 4.65822 3.95115 4.34171 4.14642 4.14645C4.34168 3.95118 4.65819 3.95118 4.85345 4.14645L7.99993 7.29293L11.1464 4.14645Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-visible: 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='M12 7C16.6667 7 19 10.75 19 12C19 13.25 16.6667 17 12 17C7.47888 17 5.14784 13.4802 5.00684 12.124L5 12C5 10.75 7.33333 7 12 7ZM12 8C9.95481 8 8.44137 8.81596 7.43359 9.76074C6.92603 10.2366 6.55333 10.7404 6.3125 11.1758C6.05459 11.6422 6 11.9345 6 12C6.00002 12.0656 6.05462 12.3579 6.3125 12.8242C6.55334 13.2597 6.92602 13.7634 7.43359 14.2393C8.44138 15.1841 9.95482 16 12 16C14.0452 16 15.5586 15.1841 16.5664 14.2393C17.074 13.7634 17.4467 13.2597 17.6875 12.8242C17.9454 12.3578 18 12.0655 18 12C18 11.9345 17.9454 11.6422 17.6875 11.1758C17.4467 10.7403 17.074 10.2366 16.5664 9.76074C15.5586 8.81595 14.0452 8 12 8ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-visible: 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='M8 4C11.5 4 14 7 14 8C14 9 11.5 12 8 12C4.5 12 2 9 2 8C2 7 4.5 4 8 4ZM8 5C6.60166 5 5.36649 5.57587 4.44238 6.30176C3.98232 6.66314 3.61689 7.04836 3.36328 7.38867C3.13535 7.69455 3.04058 7.90734 3.00977 8C3.04058 8.09266 3.13535 8.30545 3.36328 8.61133C3.61689 8.95164 3.98232 9.33686 4.44238 9.69824C5.36649 10.4241 6.60166 11 8 11C9.39834 11 10.6335 10.4241 11.5576 9.69824C12.0177 9.33686 12.3831 8.95163 12.6367 8.61133C12.8644 8.30577 12.9583 8.09281 12.9893 8C12.9583 7.90719 12.8644 7.69423 12.6367 7.38867C12.3831 7.04836 12.0177 6.66314 11.5576 6.30176C10.6335 5.57587 9.39834 5 8 5ZM8 7C8.55228 7 9 7.44772 9 8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-hidden: 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='M5.51343 9C5.78194 9 6.03192 9.21752 6.13647 9.46484C6.18062 9.56923 6.2378 9.68955 6.31225 9.82422C6.55304 10.2596 6.92594 10.7635 7.43335 11.2393C8.44103 12.184 9.95488 12.9998 11.9998 13C14.0447 13 15.5584 12.1839 16.5662 11.2393C17.0736 10.7635 17.4464 10.2596 17.6873 9.82422C17.7588 9.69491 17.8147 9.57896 17.8582 9.47754C17.9668 9.22373 18.2237 9.0001 18.4998 9C18.7757 9 18.9947 9.22463 18.9167 9.48926C18.7151 10.1715 18.146 11.1394 17.2107 12.0039L18.3533 13.1465C18.5485 13.3417 18.5485 13.6583 18.3533 13.8535C18.158 14.0486 17.8414 14.0487 17.6462 13.8535L16.4275 12.6348C15.8837 13.0163 15.2541 13.3499 14.5378 13.5918L14.9851 15.3789C15.0519 15.6467 14.8887 15.9184 14.6208 15.9854C14.3532 16.0519 14.0813 15.8888 14.0144 15.6211L13.571 13.8486C13.0805 13.9449 12.5568 14 11.9998 14C11.4423 14 10.9184 13.945 10.4275 13.8486L9.98511 15.6211C9.91811 15.8889 9.64645 16.0522 9.37866 15.9854C9.11111 15.9182 8.94768 15.6466 9.0144 15.3789L9.46069 13.5908C8.74459 13.3488 8.11371 13.0173 7.57007 12.6357L6.35327 13.8535C6.15799 14.0486 5.84143 14.0487 5.64624 13.8535C5.45126 13.6583 5.45126 13.3417 5.64624 13.1465L6.78882 12.0029C5.67043 10.9689 5.07561 9.78781 5.00659 9.12402C5.00289 9.05679 5.05649 9.00021 5.12378 9H5.51343Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-hidden: 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='M13.4138 5.5C13.7373 5.5 13.9807 5.76652 13.8415 6.05859C13.6075 6.54952 13.1215 7.17678 12.4421 7.7627L13.4157 9.22266C13.5689 9.45242 13.5068 9.76284 13.277 9.91602C13.0473 10.069 12.7368 10.007 12.5837 9.77734L11.6413 8.36328C11.1673 8.67367 10.6355 8.9499 10.0524 9.15039L10.4851 10.8789C10.5519 11.1467 10.3886 11.4184 10.1208 11.4854C9.85308 11.5519 9.58128 11.3888 9.51435 11.1211L9.08466 9.40332C8.7357 9.46559 8.37327 9.5 7.9997 9.5C7.62569 9.49998 7.2631 9.46575 6.91376 9.40332L6.48505 11.1211C6.41806 11.3889 6.1464 11.5522 5.87861 11.4854C5.61102 11.4183 5.44761 11.1466 5.51435 10.8789L5.94599 9.15039C5.36302 8.94979 4.83099 8.67372 4.35712 8.36328L3.41572 9.77734C3.2625 10.007 2.95206 10.0692 2.72236 9.91602C2.49286 9.76282 2.43071 9.45232 2.58368 9.22266L3.55634 7.76172C2.8777 7.1762 2.3927 6.54916 2.15888 6.05859C2.01973 5.76657 2.26219 5.50011 2.58564 5.5C3.05129 5.5 3.02196 5.6191 3.27021 5.98145C3.50192 6.31962 3.85806 6.72067 4.32294 7.10352C5.25669 7.87247 6.53958 8.49991 7.9997 8.5C9.45975 8.5 10.7427 7.87238 11.6765 7.10352C12.1413 6.72067 12.4985 6.31962 12.7302 5.98145C12.981 5.61523 12.9588 5.50007 13.4138 5.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");

  --tip-pointer: path("M8 6L2 0H14L8 6Z");


  /* Elevations — light-dark() handles theme switching inline */
  --figma-elevation-100:
    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1)),
    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));

  --figma-elevation-200:
    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.18), transparent),
    0px 3px 8px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)),
    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
    inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
    inset 0px 0px 0.5px 0px light-dark(transparent, rgba(255, 255, 255, 0.3));

  --figma-elevation-100-canvas:
    0 0 0.5px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
    0 0.5px 0 0 light-dark(transparent, rgba(255, 255, 255, 0.1)) inset,
    0 0 0.5px 0 light-dark(transparent, rgba(255, 255, 255, 0.3)) inset,
    0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));


  --figma-elevation-200-canvas:
    0 0 0.5px 0 light-dark(rgba(0, 0, 0, 0.18), transparent),
    0 0.5px 0 0 light-dark(transparent, rgba(255, 255, 255, 0.08)) inset, 
    0 3px 8px 0 light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.35)), 
    0 0 0.5px 0 light-dark(transparent, rgba(255, 255, 255, 0.30)) inset, 
    0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.50));

  --figma-elevation-400-menu-panel:
    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.12), transparent),
    0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
    0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
    inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));

  --figma-elevation-500-modal-window:
    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
    0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
    0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), transparent),
    0px 3px 5px 0px light-dark(transparent, rgba(0, 0, 0, 0.35)),
    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));

  --handle-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);

  &.figma-light{
    color-scheme: light;
    background-color: var(--figma-color-bg);
  }
  &.figma-dark{
    color-scheme: dark;
    background-color: var(--figma-color-bg);
  }
}


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[type="url"],
input[type="email"],
input[type="search"],
input[type="tel"],
.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;
  appearance: textfield;
  -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;
    color-scheme: inherit;
    -webkit-appearance: none;
    margin: 0;
  }
}

fig-input-number .fig-steppers {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
  overflow: hidden;

  button {
    display: block;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 1.5rem;
    flex: 1;
    background-color: var(--figma-color-text-secondary);
    mask-size: 1rem;
    mask-repeat: no-repeat;
    mask-position: center -3.5px;

    &:hover,
    &:active{
      background-color: var(--figma-color-text) !important;
    }

    &:disabled {
      pointer-events: none;
      background-color: var(--figma-color-text-disabled);
    }
  }

  fig-input-number[disabled]:not([disabled="false"]) & button {
    pointer-events: none;
    background-color: var(--figma-color-text-disabled);
  }

  & .fig-stepper-up {
    mask-image: var(--icon-16-chevron);
    rotate: 180deg;
    &:active{
      transform: translateY(1px);
    }
  }
  & .fig-stepper-down {
    mask-image: var(--icon-16-chevron);
    &:active{
      transform: translateY(1px);
    }
  }
}

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

/* Dropdown */
select,
input[type="text"][list] {
  padding: var(--spacer-2);
  background-color: var(--figma-color-bg);
  

  &:not([multiple]) {
    height: var(--spacer-4);
    padding: 0 var(--spacer-4) 0 var(--spacer-2);
    background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
    var(--icon-16-chevron);
  }
  &[multiple] {
    overflow: auto;
    option{
      padding: var(--spacer-1) var(--spacer-2);
      border-radius: var(--radius-medium);
      &:checked {
        background-color: var(--figma-color-bg-selected-strong) !important; 
      }
      &:active{
        background-color: var(--figma-color-bg-active);
      }
      &:hover{
        background-color: var(--figma-color-bg-hover);
      }
    }
  }
  border-radius: var(--radius-medium);
  display: flex;
  appearance: none;
  align-items: center;
  border: 0;
  color: var(--figma-color-text);


  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 {
    color-scheme: inherit;
    opacity: 0;
  }
}

@supports (appearance: base-select) {
  fig-dropdown[experimental~="modern"] {
    &[type="dropdown"] {
      select:before {
        content: attr(aria-label);
      }
      option::checkmark {
        display: none;
      }
      option {
        padding-left: var(--spacer-3);
      }
    }
    select {
      --option-height: 1.5rem;
      --max-width: 20rem;
      @media (hover) and (pointer: fine) {
        &,
        &::picker(select) {
          appearance: base-select;
        }
      }

      padding-block: 0;
      will-change: scale;

      @supports (-webkit-touch-callout: none) {
        font-size: 16px;
      }

      option::checkmark {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background-color: currentColor;
        -webkit-mask-image: var(--icon-16-checkmark);
        mask-image: var(--icon-16-checkmark);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
      }

      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;
        & * {
          color: inherit;
        }
        &[hidden] {
          display: none;
        }
        &:before {
          content: "";
          display: block;
          position: absolute;
          inset: 0 var(--spacer-2);
          border-radius: var(--radius-medium);
          z-index: -1;
        }
        &:checked:before {
          background-color: transparent;
        }
        &:not(:checked):before {
          background-color: transparent;
        }
        &:not(:disabled) {
          &:hover,
          &:active,
          &:focus-visible {
            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);
        &[label]:not([label=""]) {
          padding-top: var(--spacer-2);
          option:first-child {
            margin-top: var(--spacer-2);
          }
        }
        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):not(:first-of-type) {
          margin-top: var(--spacer-2);
          padding-top: var(--spacer-3);

          &: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: var(--spacer-2);
        &:before {
          display: none;
        }
      }

      & > button {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--spacer-1, 0.25rem);
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        color: inherit;
        font: inherit;
        height: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        & > selectedcontent {
          display: flex;
          align-items: center;
          gap: 0;
          min-width: 0;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
          &:has(> svg) {
            margin-left: calc(var(--spacer-2) * -1);
          }

          & svg {
            flex-shrink: 0;
          }
        }
      }
    }
    ::picker-icon {
      display: none;
    }

    ::picker(select) {
      appearance: base-select;
      color-scheme: dark;

      /* Appearance/style */
      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],
select:not([multiple]) {
  padding-right: var(--spacer-4);
  padding-left: var(--spacer-2);
}

/* Dropdown */
fig-dropdown {
  & > *:not(select) {
    display: none !important;
  }
}
fig-dropdown,
select,
.fig-dropdown {
  display: inline-flex;
  position: relative;
  > select {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
  }

  /* Chevron icon using mask-image for light-dark support */
  &:not([multiple])::after {
    content: "";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    mask-image: var(--icon-16-chevron);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--figma-color-icon);
    pointer-events: none;
  }

  /* Autoresize to content width */
  &[autoresize] select {
    field-sizing: content;
  }
}

/* Button */
.fig-button,
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;
  min-width: 0;
  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);
  }

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

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

    &:hover:not(:active) {
      background-color: transparent;
    }

    &:active {
      outline: 0;
      background-color: var(--figma-color-bg-selected);
      color: var(--figma-color-text-brand);
    }
  }
  /* Variant: Ghost */
  &[variant="ghost"] {
    box-shadow: none;
    background: none;
    color: var(--figma-color-text);

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

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

  &[variant="ghost"][disabled]:not([disabled="false"]) {
    background-color: transparent;
  }
  /* Variant: Secondary */
  &[variant="secondary"] {
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    padding: 0 calc(var(--spacer-2) - 1px);
    background: none;
    color: var(--figma-color-text);

    &:active,
    &:active:hover {
      background-color: var(--figma-color-bg-transparent-pressed);
      color: var(--figma-color-text);
    }
    &:hover {
      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);

    &:hover {
      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
      background-color: var(--figma-color-bg-transparent);
    }

    &:active,
    &:active:hover {
      background-color: var(--figma-color-bg-transparent-pressed);
      color: var(--figma-color-text);
    }

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

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

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

  /* Icon 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);
    flex-basis: var(--spacer-5);
    padding: 0;
  }

  /* 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-visible,
  &[data-focus-visible] {
    outline: 0;
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
  }
  svg {
    *[fill]:not([fill="none"]) {
      fill: currentColor;
    }
    *[stroke]:not([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