@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;
  --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-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  --icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
  --icon-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
  --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
  --icon-eyedropper: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-add: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-forward: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 7.75274C7 6.4055 8.45837 5.56342 9.625 6.23712L17.2109 10.619C18.277 11.2349 18.2771 12.7745 17.2109 13.3904L9.625 17.7723C8.45843 18.4459 7.00013 17.6038 7 16.2566V7.75274ZM9.125 7.10333C8.625 6.8145 8 7.17532 8 7.75274V16.2566C8.00013 16.834 8.62505 17.1949 9.125 16.9061L16.7109 12.5242C17.1107 12.2933 17.1106 11.7162 16.7109 11.4852L9.125 7.10333Z' fill='currentColor'/%3E%3C/svg%3E");
  --icon-pause: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.65332 6.00781C10.4097 6.08461 11 6.72334 11 7.5V16.5C11 17.2767 10.4097 17.9154 9.65332 17.9922L9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V7.5C6 6.67157 6.67157 6 7.5 6H9.5L9.65332 6.00781ZM16.6533 6.00781C17.4097 6.08461 18 6.72334 18 7.5V16.5C18 17.2767 17.4097 17.9154 16.6533 17.9922L16.5 18H14.5C13.6716 18 13 17.3284 13 16.5V7.5C13 6.67157 13.6716 6 14.5 6H16.5L16.6533 6.00781ZM7.5 7C7.22386 7 7 7.22386 7 7.5V16.5C7 16.7761 7.22386 17 7.5 17H9.5C9.77614 17 10 16.7761 10 16.5V7.5C10 7.22386 9.77614 7 9.5 7H7.5ZM14.5 7C14.2239 7 14 7.22386 14 7.5V16.5C14 16.7761 14.2239 17 14.5 17H16.5C16.7761 17 17 16.7761 17 16.5V7.5C17 7.22386 16.7761 7 16.5 7H14.5Z' fill='currentColor'/%3E%3C/svg%3E");  
  --tip-pointer: path("M8 6L2 0H14L8 6Z");


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

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

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

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

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

/* Textarea */
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-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-checkmark);
        mask-image: var(--icon-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;
          &: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-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-border);
    padding: 0 calc(var(--spacer-2) - 1px);
    background: none;
    color: var(--figma-color-text);

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

  /* 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-border);
      background-color: var(--figma-color-bg-transparent);
    }

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

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

  /* Variant: Overlay (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) {
    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);
      height: 0 !important;
      width: auto !important;
      visibility: hidden;
      overflow: hidden;
      user-select: none;
      pointer-events: none;
      font-weight: var(--body-medium-strong-fontWeight);
    }
  }

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

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

  &[disabled]:not([disabled="false"]) {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
  }
}

fig-tabs,
.tabs {
  display: flex;
  width: 100%;
  gap: var(--spacer-1);
  padding: var(--spacer-1) var(--spacer-2);
}

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

/* Avatar */
fig-avatar,
.fig-avatar {
  contain: layout paint;
  --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;
    color-scheme: inherit;
    appearance: none;
    border-radius: 0.125rem;
    background: var(--checkerboard);
    overflow: hidden;
    grid-area: 1/1;
    color-scheme: inherit;
    outline: 0;
  }

  &::-webkit-color-swatch {
    padding: 0;
    border: 0;
    color-scheme: inherit;
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    color-scheme: inherit;
    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 {
    color-scheme: inherit;
    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%
    );
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
  }
}

fig-chit {
  --size: 1.5rem;
  --padding: 5px;
  --width: var(--size);
  --height: var(--size);
  --border-radius: var(--radius-medium);
  --chit-background: linear-gradient(#d9d9d9, #d9d9d9);
  --chit-bg-size: cover;
  --chit-bg-position: center;
  --selected: 0;
  --alpha: 1;

  display: inline-grid;
  width: var(--size);
  height: var(--size);
  border-radius: var(--border-radius);
  background-color: var(--figma-color-bg-secondary);
  box-shadow: inset 0 0 0 calc(var(--selected) * 1px)
    var(--figma-color-border-selected);

  &::before,
  &::after,
  div,
  input {
    grid-area: 1/1;
  }
  & > div {
    background: var(--checkerboard-small);
    border-radius: var(--border-radius);
  }

  /* Selection ring */
  &[selected]:not([selected="false"]) {
    --selected: 1;
    background-color: transparent;
  }

  &[size="medium"],
  &[size="large"] {
    --padding: 0px;
    &[selected]:not([selected="false"]) {
      --padding: 3px;
    }
    & > div {
      background: var(--checkerboard);
    }
  }

  &[size="medium"] {
    --size: 1.5rem;
    --padding: 0px;
  }

  &[size="large"] {
    --size: 2rem;
    --padding: 0px;
  }

  &[disabled]:not([disabled="false"]) {
    pointer-events: none;
  }

  &::before,
  &::after,
  & > div {
    content: "";
    width: calc(var(--width) - var(--padding) * 2);
    height: calc(var(--height) - var(--padding) * 2);
    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
    grid-area: 1/1;
    place-self: center;
    pointer-events: none;
  }
  &::after {
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    z-index: 1;
  }
  &::before {
    content: "";
    background: var(--chit-background);
    background-size: var(--chit-bg-size);
    background-position: var(--chit-bg-position);
    background-repeat: no-repeat;
    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
    mask-image: linear-gradient(
      to right,
      black 0%,
      black 50%,
      rgba(0, 0, 0, var(--alpha)) 50%
    );
    grid-area: 1/1;
    place-self: center;
  }
  &[size="medium"]::before,
  &[size="large"]::before {
    border-radius: calc(var(--border-radius) - var(--padding));
  }
  input[type="color"] {
    background: none;
    width: var(--width);
    height: var(--height);
    grid-area: 1/1;
    place-self: center;
    box-sizing: border-box;
    opacity: 0;
  }

  /* Gradient/Image types - inset thumbnail with hidden input */
  &[data-type="gradient"],
  &[data-type="image"] {
    background-color: var(--figma-color-bg-secondary);
    input[type="color"] {
      display: none;
    }
  }
}

/* Fig Image */
fig-truncate {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  vertical-align: bottom;

  &[position="left"] {
    display: block;
    direction: rtl;
    text-align: left;
  }

  &[position="middle"] {
    display: inline-flex;
    text-overflow: clip;
    gap: 0;

    & > .start,
    & > .end {
      flex: 0 1 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    & > .end {
      direction: rtl; /* technique #2 on right half */
      text-align: left;
      text-overflow: ellipsis;
    }
    &[tail] {
      & > .end {
        direction: ltr;
        text-align: right;
        flex-shrink: 0;
      }
    }
  }
}

fig-input-file {
  display: flex;
  align-items: center;
  gap: var(--spacer-2);
  min-width: 0;

  &[full]:not([full="false"]) {
    flex: 1 1 auto;
    width: 100%;

    & > fig-tooltip,
    & > fig-button {
      flex: 1;
      min-width: 0;
    }

    & > fig-tooltip > fig-button {
      width: 100%;
    }
  }

  .fig-input-file-filename {
    flex: 1;
    min-width: 0;
  }

  .fig-input-file-clear {
    flex-shrink: 0;
  }

  &[dragover] fig-button {
    outline: 1px dashed var(--figma-color-border-brand);
    outline-offset: -1px;
  }
}

fig-media,
fig-image,
fig-vid