components.css

@layer figui.defaults {
: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-active: var(--figma-color-bg-pressed);
  --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);
  --figma-color-bg-slot: light-dark(
    rgba(255, 36, 189, 0.25),
    rgba(243, 22, 176, 0.25)
  );

  /* 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);
  --figma-color-border-slot: light-dark(#ff24bd, #f316b0);

  /* Focus */
  --figma-focus-outline: 1px solid var(--figma-color-border-selected);
  --figma-focus-outline-offset: -1px;
  --figma-focus-outline-radius: inherit;

  /* 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(#6f3bb2, #d1a8ff);
  --figma-color-icon-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
  --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, #ffffffb3);
  --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(#00000099, #ffffff99);
  --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(#6f3bb2, #d1a8ff);
  --figma-color-text-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
  --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(#00000099, #ffffffcc);
  --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(#00000099, #ffffff99);
  --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.7);
}
}

:root,
:host {
  /* Typography & Sizing */
  --font-size: 16px;
  --font-family:
    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;
  --font-size-small: var(--body-medium-fontSize);
  --line-height: 1rem;

  /* 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;
  --spacer-half: 0.125rem;

  /* 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;
  --transition-duration: 0.08s;
  --transition-timing-function: ease-out;

  /* Misc UI */
  --popover-min-width: 15rem;
  --control-height: var(--spacer-4);
  --handle-color: #fff;
  --bg-selected: #f5f5f5;
  --bg-selected-active: #e5f4ff;
  --bg-tooltip: var(--figma-color-bg-menu);
  --color-tooltip: var(--figma-color-text);
  --input-opacity-width: calc(3.25rem - 2px);

  /* 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-swatch: repeating-conic-gradient(
      rgba(0, 0, 0, 0.2) 0% 25%,
      rgba(255, 255, 255, 0.2) 0% 50%
    )
    0 0 / 0.4375rem 0.4375rem;
    --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.375rem 0.375rem;
  --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-24-chevron: 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.64645 10.1464C7.84171 9.95118 8.15829 9.95118 8.35355 10.1464L12 13.7929L15.6464 10.1464C15.8417 9.95118 16.1583 9.95118 16.3536 10.1464C16.5488 10.3417 16.5488 10.6583 16.3536 10.8536L12.3536 14.8536C12.1583 15.0488 11.8417 15.0488 11.6464 14.8536L7.64645 10.8536C7.45118 10.6583 7.45118 10.3417 7.64645 10.1464Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --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.5839 3.72266C11.7371 3.49298 12.0476 3.43085 12.2773 3.58399C12.5069 3.73716 12.569 4.04762 12.416 4.27735L7.41596 11.7773C7.33289 11.9019 7.19778 11.9833 7.04877 11.998C6.8999 12.0126 6.75223 11.9593 6.64642 11.8535L3.64642 8.85352C3.4512 8.65826 3.45119 8.34174 3.64642 8.14649C3.84169 7.95133 4.15822 7.95128 4.35346 8.14649L6.92182 10.7148L11.5839 3.72266Z' fill='white'/%3E%3C/svg%3E");
  --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-reset: 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='M8.22473 5.08203C8.41872 4.9541 8.68285 4.97586 8.85364 5.14648C9.0244 5.31725 9.046 5.58134 8.91809 5.77539L8.85364 5.85352L7.70715 7H12.0001C15.3136 7.00005 17.9999 9.68652 18.0001 13C18.0001 16.3137 15.3138 19 12.0001 19C8.68641 19 6.00012 16.3137 6.00012 13C6.00036 12.7241 6.22413 12.5 6.50012 12.5C6.77608 12.5 6.99989 12.7241 7.00012 13C7.00012 15.7614 9.2387 18 12.0001 18C14.7615 18 17.0001 15.7614 17.0001 13C16.9999 10.2388 14.7614 8.00005 12.0001 8H7.70715L8.85364 9.14648L8.91809 9.22461C9.04619 9.41859 9.02426 9.68264 8.85364 9.85352C8.68277 10.0244 8.41881 10.0461 8.22473 9.91797L8.14661 9.85352L6.14661 7.85352C5.95152 7.65824 5.9514 7.34169 6.14661 7.14648L8.14661 5.14648L8.22473 5.08203Z' fill='black' fill-opacity='0.9'/%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-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-arrow-left: 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='M13.1464 7.64645C13.3417 7.45118 13.6582 7.45118 13.8535 7.64645C14.0487 7.84171 14.0487 8.15822 13.8535 8.35348L10.207 12L13.8535 15.6464C14.0487 15.8417 14.0487 16.1582 13.8535 16.3535C13.6582 16.5487 13.3417 16.5487 13.1464 16.3535L9.14645 12.3535C8.95118 12.1582 8.95118 11.8417 9.14645 11.6464L13.1464 7.64645Z' fill='black' fill-opacity='0.9'/%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");
  --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-edit: 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.51363 17.3361L5.9609 14.6515C6.02947 14.2405 6.22485 13.8612 6.51949 13.5665L13.9394 6.14661C14.5252 5.56088 15.4747 5.56088 16.0605 6.14661L17.8535 7.93958C18.4026 8.48875 18.4365 9.35727 17.956 9.94642L17.8535 10.0607L10.4336 17.4806C10.1389 17.7752 9.75962 17.9706 9.34859 18.0392L6.66402 18.4865C6.34557 18.5394 6.02121 18.4354 5.79293 18.2072C5.56465 17.9789 5.46067 17.6545 5.51363 17.3361ZM16.1035 10.3966L17.1464 9.35365C17.3417 9.15839 17.3417 8.84187 17.1464 8.64661L15.3535 6.85365L15.2754 6.78919C15.0813 6.66106 14.8173 6.68283 14.6464 6.85365L13.6035 7.89661L16.1035 10.3966ZM9.18355 17.0529C9.33777 17.0272 9.48317 16.9654 9.60836 16.8742L9.72652 16.7736L15.3964 11.1036L12.8964 8.60365L7.22652 14.2736L7.12594 14.3917C7.03467 14.5169 6.97293 14.6623 6.94723 14.8165L6.49996 17.5001L9.18355 17.0529Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-edit: 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.86914 2.72461C10.2619 2.40426 10.8409 2.42685 11.207 2.79297L13.207 4.79297C13.5974 5.1835 13.5975 5.81655 13.207 6.20703L6.70703 12.707C6.51951 12.8945 6.26516 13 6 13H4C3.44779 13 3.00013 12.5522 3 12V10C3 9.73484 3.10551 9.48049 3.29297 9.29297L9.79297 2.79297L9.86914 2.72461ZM4 10V12H6L10.6465 7.35352L8.64648 5.35352L4 10ZM9.35352 4.64648L11.3535 6.64648L12.5 5.5L10.5 3.5L9.35352 4.64648Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-spinner: 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 5.5C13.2856 5.5 14.5423 5.88122 15.6112 6.59545C16.6801 7.30968 17.5132 8.32484 18.0052 9.51256C18.4972 10.7003 18.6259 12.0072 18.3751 13.2681C18.1243 14.529 17.5052 15.6872 16.5962 16.5962C15.6872 17.5052 14.529 18.1243 13.2681 18.3751C12.0072 18.6259 10.7003 18.4972 9.51256 18.0052C8.32484 17.5132 7.30968 16.6801 6.59545 15.6112C5.88122 14.5423 5.5 13.2856 5.5 12' stroke='black' stroke-opacity='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-16-spinner: 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 2.5C9.0878 2.5 10.1512 2.82257 11.0556 3.42692C11.9601 4.03126 12.6651 4.89025 13.0813 5.89524C13.4976 6.90023 13.6065 8.0061 13.3943 9.073C13.1821 10.1399 12.6583 11.1199 11.8891 11.8891C11.1199 12.6583 10.1399 13.1821 9.073 13.3943C8.0061 13.6065 6.90023 13.4976 5.89524 13.0813C4.89025 12.6651 4.03126 11.9601 3.42692 11.0556C2.82257 10.1512 2.5 9.0878 2.5 8' stroke='black' stroke-opacity='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-24-settings: 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.755 7.23427C15.4526 7.41038 15.0708 7.42207 14.7499 7.23681C14.4289 7.05149 14.2481 6.71483 14.2496 6.36477C14.2518 5.84407 13.908 5.22635 13.212 5.10473C12.8177 5.03581 12.4126 5 11.9999 5C11.5873 5 11.1822 5.03582 10.7878 5.10474C10.0918 5.22636 9.74809 5.84409 9.75026 6.36479C9.75172 6.71485 9.57093 7.05152 9.24994 7.23684C8.92906 7.4221 8.54727 7.41041 8.24489 7.2343C7.79535 6.97249 7.09002 6.96142 6.63667 7.50141C6.1179 8.11934 5.70348 8.82895 5.42136 9.60311C5.17962 10.2665 5.54277 10.8723 5.99461 11.1305C6.29865 11.3042 6.49993 11.6292 6.49993 12C6.49993 12.3707 6.29864 12.6957 5.9946 12.8694C5.54276 13.1276 5.17959 13.7334 5.42133 14.3968C5.70344 15.171 6.11787 15.8806 6.63664 16.4986C7.08999 17.0386 7.79532 17.0275 8.24486 16.7657C8.54724 16.5896 8.92903 16.5779 9.2499 16.7631C9.57089 16.9485 9.75168 17.2851 9.75022 17.6352C9.74805 18.1559 10.0918 18.7736 10.7878 18.8953C11.1822 18.9642 11.5873 19 11.9999 19C12.4126 19 12.8177 18.9642 13.2121 18.8953C13.9081 18.7736 14.2518 18.1559 14.2496 17.6352C14.2481 17.2851 14.4289 16.9484 14.7499 16.7631C15.0708 16.5779 15.4526 16.5895 15.755 16.7657C16.2045 17.0275 16.9099 17.0386 17.3632 16.4986C17.882 15.8806 18.2964 15.171 18.5786 14.3968C18.8203 13.7334 18.4571 13.1276 18.0053 12.8694C17.7013 12.6957 17.5 12.3707 17.5 12C17.5 11.6292 17.7013 11.3042 18.0053 11.1305C18.4571 10.8723 18.8203 10.2665 18.5785 9.60313C18.2964 8.82895 17.882 8.11931 17.3632 7.50137C16.9098 6.96138 16.2045 6.97245 15.755 7.23427ZM14.2499 8.10284C14.8939 8.47463 15.6587 8.4476 16.2582 8.0984C16.3697 8.03351 16.5144 8.04562 16.5973 8.14436C17.0424 8.67449 17.3974 9.28272 17.639 9.94552C17.6832 10.0667 17.6212 10.1982 17.5092 10.2623C16.9063 10.6067 16.5 11.2559 16.5 12C16.5 12.744 16.9063 13.3932 17.5092 13.7377C17.6212 13.8017 17.6832 13.9332 17.639 14.0544C17.3975 14.7172 17.0424 15.3254 16.5974 15.8556C16.5145 15.9543 16.3697 15.9664 16.2583 15.9015C15.6587 15.5523 14.8939 15.5253 14.2499 15.8971C13.6057 16.269 13.2467 16.9452 13.2496 17.6394C13.2502 17.7685 13.1671 17.888 13.0399 17.9102C12.7021 17.9692 12.3546 18 11.9999 18C11.6452 18 11.2977 17.9692 10.9599 17.9102C10.8327 17.888 10.7497 17.7685 10.7502 17.6394C10.7531 16.9452 10.3941 16.269 9.7499 15.8971C9.10594 15.5253 8.34117 15.5523 7.74159 15.9015C7.63018 15.9664 7.48543 15.9543 7.40253 15.8556C6.95747 15.3254 6.60242 14.7172 6.36089 14.0544C6.31671 13.9332 6.3787 13.8017 6.49072 13.7377C7.09359 13.3932 7.49993 12.744 7.49993 12C7.49993 11.2559 7.0936 10.6067 6.49074 10.2622C6.37872 10.1982 6.31674 10.0667 6.36091 9.94551C6.60245 9.28272 6.9575 8.67451 7.40255 8.14439C7.48545 8.04565 7.6302 8.03354 7.74161 8.09843C8.3412 8.44763 9.10598 8.47466 9.74994 8.10286C10.3941 7.73094 10.7531 7.05475 10.7503 6.36062C10.7497 6.23151 10.8328 6.11203 10.9599 6.08981C11.2977 6.03078 11.6452 6 11.9999 6C12.3546 6 12.7021 6.03078 13.0399 6.0898C13.1671 6.11203 13.2501 6.2315 13.2496 6.36061C13.2467 7.05473 13.6057 7.73091 14.2499 8.10284ZM10.4999 12C10.4999 11.1716 11.1715 10.5 11.9999 10.5C12.8284 10.5 13.4999 11.1716 13.4999 12C13.4999 12.8284 12.8284 13.5 11.9999 13.5C11.1715 13.5 10.4999 12.8284 10.4999 12ZM11.9999 9.5C10.6192 9.5 9.49994 10.6193 9.49994 12C9.49994 13.3807 10.6192 14.5 11.9999 14.5C13.3807 14.5 14.4999 13.3807 14.4999 12C14.4999 10.6193 13.3807 9.5 11.9999 9.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-settings: 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.31951 2.0081C8.63957 2.02541 8.95246 2.06727 9.25717 2.13234C9.2583 2.13285 9.36317 2.16083 9.37434 2.16381C9.86377 2.31521 10.1341 2.72145 10.2216 3.10097C10.2215 3.11507 10.2503 3.27344 10.2503 3.27344C10.2503 3.2735 10.2738 3.39069 10.2738 3.39069C10.311 3.50552 10.3889 3.60576 10.5002 3.67049C10.5021 3.67258 10.5989 3.71411 10.6088 3.71839C10.7275 3.75177 10.8515 3.74099 10.9611 3.68991C10.9645 3.68638 11.1103 3.63071 11.1242 3.6254C11.4964 3.51228 11.9813 3.54148 12.3574 3.88434C12.3628 3.8861 12.4389 3.96209 12.4452 3.96834C12.4453 3.96838 12.6484 4.21056 12.6484 4.21056C13.1165 4.78066 13.4804 5.44161 13.7121 6.16246C13.7149 6.17767 13.7423 6.28045 13.7425 6.28125C13.8537 6.7773 13.638 7.21289 13.353 7.47774C13.3387 7.48737 13.219 7.58594 13.219 7.58594C13.1002 7.66994 13.0226 7.79446 13.0041 7.93741C13.0003 7.9375 13.0003 8.0625 13.0003 8.0625C13.0209 8.20342 13.0968 8.3265 13.2097 8.40716C13.2124 8.40722 13.3418 8.50782 13.3513 8.5152C13.6316 8.78218 13.8484 9.21484 13.7414 9.7107C13.7401 9.71973 13.7112 9.82812 13.7112 9.82812C13.4814 10.5549 13.1173 11.2176 12.6503 11.7903C12.6345 11.806 12.4456 12.0312 12.4456 12.0312C12.0587 12.4531 11.5262 12.4978 11.1256 12.374C11.1113 12.3697 10.9612 12.3125 10.9612 12.3125C10.8714 12.2692 10.774 12.2547 10.6802 12.267C10.669 12.2686 10.594 12.2891 10.594 12.2891C10.5828 12.2912 10.5702 12.2967 10.5546 12.3038C10.535 12.3127 10.5177 12.3209 10.5007 12.329C10.4925 12.3337 10.4456 12.3672 10.4456 12.3672C10.3352 12.4513 10.2694 12.5733 10.2536 12.703C10.2503 12.7031 10.2503 12.8359 10.2503 12.8359C10.2442 13.3005 9.95141 13.6315 9.61658 13.7713C9.60265 13.7784 9.47686 13.8203 9.47686 13.8203C9.11934 13.9072 8.75211 13.9651 8.37555 13.9884C8.34697 13.9856 8.0003 14 8.0003 14C7.6749 13.9999 7.35708 13.9743 7.04672 13.9247C7.0243 13.9178 6.74249 13.8672 6.74249 13.8672C6.09697 13.7294 5.78931 13.1754 5.74986 12.7268C5.73805 12.5892 5.67401 12.4628 5.56973 12.375C5.55432 12.368 5.54439 12.3624 5.53419 12.3567C5.49568 12.335 5.45758 12.3137 5.42943 12.2979C5.29224 12.2472 5.15454 12.2569 5.03853 12.3107C4.65161 12.4919 4.06725 12.5131 3.63238 12.1102C3.62614 12.1024 3.54717 12.0234 3.54717 12.0234C3.05356 11.4759 2.65946 10.8398 2.39223 10.1401C2.38729 10.1297 2.28936 9.83594 2.28936 9.83594C2.085 9.21085 2.41443 8.66774 2.78342 8.41082C2.79058 8.39903 2.86592 8.33596 2.8745 8.32879C2.95214 8.24176 2.99865 8.12765 2.99971 8.00029C3.00029 8 2.9853 7.87997 2.98469 7.87515C2.96344 7.79641 2.92483 7.72547 2.87233 7.66672C2.86594 7.65626 2.78155 7.58594 2.78155 7.58594C2.41249 7.3283 2.08643 6.78669 2.2855 6.16347C2.29278 6.15352 2.38586 5.87456 2.39073 5.85997C2.65941 5.15978 3.05409 4.52282 3.54692 3.97763C3.54759 3.97618 3.62427 3.89947 3.63241 3.89132C4.01092 3.54098 4.50075 3.51189 4.87356 3.62734C4.87942 3.62669 5.02584 3.68236 5.03849 3.68717C5.03847 3.68718 5.14785 3.72624 5.14785 3.72624C5.26334 3.75075 5.38729 3.7341 5.49848 3.67092C5.50161 3.67079 5.54722 3.63835 5.55412 3.63343C5.66764 3.54677 5.73526 3.41922 5.74777 3.28141C5.75102 3.27518 5.77244 3.11146 5.77368 3.10199C5.86963 2.69196 6.17657 2.25047 6.74082 2.13122C6.75426 2.13063 7.02637 2.08186 7.04605 2.07833C7.3559 2.02585 7.67443 2.00001 7.99878 2C8.01175 2.00028 8.29947 2.0073 8.31951 2.00779L8.31951 2.0081ZM7.72576 3.0081C7.45937 3.02159 7.19902 3.05647 6.94759 3.10961C6.82933 3.13709 6.75511 3.24295 6.74474 3.35958C6.70491 3.83399 6.44257 4.27973 6.00147 4.53524C5.55557 4.79143 5.03756 4.79553 4.611 4.59522C4.50004 4.54497 4.37104 4.55747 4.29216 4.64445C3.8193 5.1675 3.45727 5.78594 3.23829 6.46713C3.20344 6.58123 3.25696 6.69751 3.35141 6.765C3.74158 7.03654 3.9959 7.48327 3.99971 7.99219C3.99964 8.50887 3.74503 8.96046 3.35586 9.23077C3.26732 9.29396 3.21553 9.39274 3.22898 9.4919C3.22812 9.49846 3.23467 9.53125 3.23467 9.53125C3.45757 10.2146 3.81993 10.8334 4.29239 11.3566C4.37514 11.4448 4.50317 11.4563 4.60905 11.4076C4.99448 11.2266 5.44844 11.2119 5.86557 11.397C5.87329 11.4006 5.878 11.403 5.88258 11.4055C5.93014 11.4321 6.12689 11.5425 6.13257 11.5463C6.45081 11.7791 6.65504 12.1186 6.72476 12.4848C6.72758 12.4916 6.74249 12.6406 6.74249 12.6406C6.75672 12.757 6.83123 12.8627 6.94501 12.8887C7.20079 12.9434 7.46048 12.9784 7.72575 12.9927C7.72694 12.9922 7.98043 12.9994 7.9992 13C8.42545 12.9999 8.8382 12.9467 9.23265 12.8482C9.23643 12.8471 9.23915 12.8458 9.24139 12.8441C9.24245 12.8437 9.24846 12.8318 9.24996 12.8288C9.24952 12.8159 9.2501 12.795 9.24995 12.7828C9.24458 12.2581 9.51191 11.749 9.99339 11.4646C9.99762 11.4621 9.99686 11.4624 9.99919 11.4612C10.0003 11.4609 10.1273 11.3974 10.1399 11.3911C10.1399 11.391 10.2805 11.3363 10.2805 11.3363C10.6508 11.216 11.0457 11.2461 11.388 11.4061C11.4725 11.4442 11.5655 11.4457 11.6399 11.4067C11.6409 11.4062 11.6951 11.3656 11.7026 11.36C12.1759 10.8367 12.5388 10.2173 12.7554 9.53102C12.783 9.44305 12.7587 9.35546 12.7042 9.28847C12.6966 9.28221 12.6409 9.22656 12.6409 9.22656C12.3005 8.99086 12.0652 8.61779 12.0115 8.18821C12.0082 8.18749 12.0006 8.00777 12.0003 8.00024C12.0012 7.49012 12.2547 7.04097 12.645 6.76749C12.7326 6.70328 12.7824 6.60607 12.7692 6.50857C12.766 6.5078 12.7585 6.47058 12.7581 6.46881C12.5396 5.78254 12.1753 5.16178 11.7042 4.6439C11.6206 4.55669 11.4943 4.54567 11.3896 4.59351C11.01 4.7706 10.5697 4.78846 10.1706 4.62098C10.1545 4.60915 10.0003 4.53906 10.0003 4.53906C9.55722 4.28004 9.29427 3.83328 9.25301 3.36095C9.24274 3.25618 9.1845 3.16342 9.09421 3.12463C9.08637 3.12244 9.04717 3.10938 9.04717 3.10938C8.79259 3.05581 8.53203 3.02103 8.26596 3.00712C8.24594 3.00722 8.0003 3 8.0003 3C7.99919 3.00003 7.72575 3.00784 7.72575 3.00784L7.72576 3.0081ZM10.4445 12.3519L10.4758 12.344C10.4804 12.3378 10.4863 12.3346 10.4928 12.3309C10.4773 12.3403 10.4616 12.3481 10.4474 12.3551L10.4445 12.3519ZM8.20232 6.0081C9.21117 6.1121 9.99877 6.96407 9.99877 8C9.99861 9.10458 9.10347 9.99977 7.99919 10C6.89429 10 5.99892 9.10473 5.99877 8.00029C5.99919 8.00029 6.00701 7.79716 6.00701 7.79716C6.11047 6.78796 6.9626 6 7.99877 6C7.99919 6.00029 8.20232 6.0081 8.20232 6.0081ZM7.89763 7.0081C7.39268 7.05592 6.99877 7.48196 6.99877 8C6.99927 8.00656 7.00658 8.10156 7.00658 8.10156C7.0517 8.57298 7.42607 8.94726 7.89693 8.99488C7.90839 8.99305 7.99877 9 7.99877 9C8.51682 8.99978 8.9425 8.60628 8.99362 8.10208C8.9916 8.09411 8.99833 8.00564 8.99875 8.00026C8.99877 7.48225 8.60529 7.0564 8.10105 7.00517C8.09279 7.00714 8.0062 7.00057 7.99921 7.00003C7.99919 7.00029 7.89763 7.0081 7.89763 7.0081Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-more: 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.5 12C7.5 12.8284 6.82843 13.5 6 13.5C5.17157 13.5 4.5 12.8284 4.5 12C4.5 11.1716 5.17157 10.5 6 10.5C6.82843 10.5 7.5 11.1716 7.5 12ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM18 13.5C18.8284 13.5 19.5 12.8284 19.5 12C19.5 11.1716 18.8284 10.5 18 10.5C17.1716 10.5 16.5 11.1716 16.5 12C16.5 12.8284 17.1716 13.5 18 13.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-more: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 8C5 8.55228 4.55228 9 4 9C3.44772 9 3 8.55228 3 8C3 7.44772 3.44772 7 4 7C4.55228 7 5 7.44772 5 8ZM9 8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7C8.55228 7 9 7.44772 9 8ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-send: 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.7246 5.58203C11.9187 5.45387 12.1827 5.47562 12.3535 5.64648L16.8535 10.1465C17.0488 10.3417 17.0488 10.6583 16.8535 10.8535C16.6583 11.0488 16.3417 11.0488 16.1465 10.8535L12.5 7.20703V18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18V7.20703L7.85352 10.8535C7.65825 11.0488 7.34175 11.0488 7.14648 10.8535C6.95122 10.6583 6.95122 10.3417 7.14648 10.1465L11.6465 5.64648L11.7246 5.58203Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-send: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 12.0002C7.72386 12.0002 7.5 11.7764 7.5 11.5002L7.50001 4.70735L4.35355 7.8538C4.15829 8.04906 3.84171 8.04906 3.64645 7.8538C3.45118 7.65853 3.45118 7.34195 3.64645 7.14669L7.64645 3.14669C7.74022 3.05292 7.8674 3.00024 8.00001 3.00024C8.13261 3.00024 8.25979 3.05292 8.35356 3.14669L12.3536 7.14669C12.5488 7.34195 12.5488 7.65854 12.3536 7.8538C12.1583 8.04906 11.8417 8.04906 11.6464 7.8538L8.50001 4.70735L8.5 11.5002C8.5 11.7764 8.27615 12.0002 8 12.0002Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-download: 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='M17.5 13C17.7761 13 18 13.2239 18 13.5V16.5C18 17.3284 17.3284 18 16.5 18H7.5C6.67157 18 6 17.3284 6 16.5V13.5C6 13.2239 6.22386 13 6.5 13C6.77614 13 7 13.2239 7 13.5V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V13.5C17 13.2239 17.2239 13 17.5 13ZM12 6C12.2761 6 12.5 6.22386 12.5 6.5V12.293L14.6465 10.1465C14.8417 9.95122 15.1583 9.95122 15.3535 10.1465C15.5488 10.3417 15.5488 10.6583 15.3535 10.8535L12.3535 13.8535C12.1583 14.0488 11.8417 14.0488 11.6465 13.8535L8.64648 10.8535C8.45122 10.6583 8.45122 10.3417 8.64648 10.1465C8.84175 9.95122 9.15825 9.95122 9.35352 10.1465L11.5 12.293V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-upload: 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.3536 6.14645C12.1583 5.95118 11.8417 5.95118 11.6464 6.14645L8.64645 9.14645C8.45118 9.34171 8.45118 9.65829 8.64645 9.85355C8.84171 10.0488 9.15829 10.0488 9.35355 9.85355L11.5 7.70711V13.5C11.5 13.7761 11.7239 14 12 14C12.2761 14 12.5 13.7761 12.5 13.5V7.70711L14.6464 9.85355C14.8417 10.0488 15.1583 10.0488 15.3536 9.85355C15.5488 9.65829 15.5488 9.34171 15.3536 9.14645L12.3536 6.14645ZM7 13.5C7 13.2239 6.77614 13 6.5 13C6.22386 13 6 13.2239 6 13.5V16.5C6 17.3284 6.67157 18 7.5 18H16.5C17.3284 18 18 17.3284 18 16.5V13.5C18 13.2239 17.7761 13 17.5 13C17.2239 13 17 13.2239 17 13.5V16.5C17 16.7761 16.7761 17 16.5 17H7.5C7.22386 17 7 16.7761 7 16.5V13.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-sun: 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 5C12.2761 5 12.5 5.22386 12.5 5.5V6.5C12.5 6.77614 12.2761 7 12 7C11.7239 7 11.5 6.77614 11.5 6.5V5.5C11.5 5.22386 11.7239 5 12 5ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15ZM7.75687 7.05026C7.56161 6.85499 7.24503 6.85499 7.04977 7.05026C6.8545 7.24552 6.8545 7.5621 7.04977 7.75736L7.75687 8.46447C7.95214 8.65973 8.26872 8.65973 8.46398 8.46447C8.65924 8.26921 8.65924 7.95262 8.46398 7.75736L7.75687 7.05026ZM19 12C19 12.2761 18.7761 12.5 18.5 12.5H17.5C17.2239 12.5 17 12.2761 17 12C17 11.7239 17.2239 11.5 17.5 11.5H18.5C18.7761 11.5 19 11.7239 19 12ZM16.9502 7.75736C17.1455 7.5621 17.1455 7.24552 16.9502 7.05026C16.755 6.85499 16.4384 6.85499 16.2431 7.05026L15.536 7.75736C15.3408 7.95262 15.3408 8.26921 15.536 8.46447C15.7313 8.65973 16.0479 8.65973 16.2431 8.46447L16.9502 7.75736ZM12 17C12.2761 17 12.5 17.2239 12.5 17.5V18.5C12.5 18.7761 12.2761 19 12 19C11.7239 19 11.5 18.7761 11.5 18.5V17.5C11.5 17.2239 11.7239 17 12 17ZM16.2422 15.5356C16.047 15.3403 15.7304 15.3403 15.5351 15.5356C15.3399 15.7309 15.3399 16.0475 15.5351 16.2427L16.2422 16.9498C16.4375 17.1451 16.7541 17.1451 16.9493 16.9498C17.1446 16.7546 17.1446 16.438 16.9493 16.2427L16.2422 15.5356ZM7 12C7 12.2761 6.77614 12.5 6.5 12.5H5.5C5.22386 12.5 5 12.2761 5 12C5 11.7239 5.22386 11.5 5.5 11.5H6.5C6.77614 11.5 7 11.7239 7 12ZM8.46488 16.2427C8.66014 16.0475 8.66014 15.7309 8.46488 15.5356C8.26962 15.3403 7.95304 15.3403 7.75777 15.5356L7.05067 16.2427C6.85541 16.438 6.85541 16.7546 7.05067 16.9498C7.24593 17.1451 7.56251 17.1451 7.75777 16.9498L8.46488 16.2427Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-moon: 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 14.9999C15.3647 14.9999 15.7224 14.9672 16.0703 14.9045C15.1624 16.1743 13.677 16.9997 12 16.9997C9.23858 16.9997 7 14.7611 7 11.9997C7 10.3226 7.82546 8.8371 9.09542 7.92923C9.03267 8.27722 9 8.63509 9 8.99986C9 12.3136 11.6863 14.9999 15 14.9999ZM17.3039 14.8075C17.6193 14.2129 16.8933 13.678 16.2412 13.8446C15.8443 13.946 15.4285 13.9999 15 13.9999C12.2386 13.9999 10 11.7613 10 8.99986C10 8.57132 10.0539 8.15537 10.1553 7.75842C10.3219 7.10631 9.78711 6.38032 9.19252 6.6957C7.29348 7.70298 6 9.70029 6 11.9997C6 15.3134 8.68629 17.9997 12 17.9997C14.2993 17.9997 16.2965 16.7064 17.3039 14.8075ZM16 7.49993C16 7.22379 15.7761 6.99993 15.5 6.99993C15.2239 6.99993 15 7.22379 15 7.49993V7.99993H14.5C14.2239 7.99993 14 8.22379 14 8.49993C14 8.77607 14.2239 8.99993 14.5 8.99993H15V9.49993C15 9.77607 15.2239 9.99993 15.5 9.99993C15.7761 9.99993 16 9.77607 16 9.49993V8.99993H16.5C16.7761 8.99993 17 8.77607 17 8.49993C17 8.22379 16.7761 7.99993 16.5 7.99993H16V7.49993Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-adjust: 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='M8.5 18C8.77614 18 9 17.7761 9 17.5V15.9492C10.141 15.7175 11 14.7094 11 13.5C11 12.2905 10.1411 11.2814 9 11.0498V6.5C9 6.22386 8.77614 6 8.5 6C8.22386 6 8 6.22386 8 6.5V11.0498C6.85886 11.2814 6 12.2905 6 13.5C6 14.7094 6.85895 15.7175 8 15.9492V17.5C8 17.7761 8.22386 18 8.5 18ZM15.5 18C15.7761 18 16 17.7761 16 17.5V12.9502C17.1411 12.7186 18 11.7095 18 10.5C18 9.29057 17.141 8.28247 16 8.05078V6.5C16 6.22386 15.7761 6 15.5 6C15.2239 6 15 6.22386 15 6.5V8.05078C13.859 8.28247 13 9.29057 13 10.5C13 11.7095 13.8589 12.7186 15 12.9502V17.5C15 17.7761 15.2239 18 15.5 18ZM15.5 12C14.6716 12 14 11.3284 14 10.5C14 9.67157 14.6716 9 15.5 9C16.3284 9 17 9.67157 17 10.5C17 11.3284 16.3284 12 15.5 12ZM8.5 15C7.67157 15 7 14.3284 7 13.5C7 12.6716 7.67157 12 8.5 12C9.32843 12 10 12.6716 10 13.5C10 14.3284 9.32843 15 8.5 15Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-16-adjust: 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.5 13C5.77614 13 6 12.7761 6 12.5V11.5C6 11.478 5.99591 11.4568 5.99316 11.4355C6.85886 11.2156 7.5 10.4341 7.5 9.5C7.5 8.56581 6.85898 7.7833 5.99316 7.56348C5.99583 7.54257 6 7.52163 6 7.5V3.5C6 3.22386 5.77614 3 5.5 3C5.22386 3 5 3.22386 5 3.5V7.5C5 7.52158 5.00321 7.54261 5.00586 7.56348C4.14051 7.78362 3.5 8.56614 3.5 9.5C3.5 10.4338 4.14063 11.2153 5.00586 11.4355C5.00313 11.4567 5 11.4781 5 11.5V12.5C5 12.7761 5.22386 13 5.5 13ZM10.5 13C10.7761 13 11 12.7761 11 12.5V8.5C11 8.47837 10.9958 8.45743 10.9932 8.43652C11.859 8.2167 12.5 7.43419 12.5 6.5C12.5 5.56589 11.8589 4.78435 10.9932 4.56445C10.9959 4.54324 11 4.52196 11 4.5V3.5C11 3.22386 10.7761 3 10.5 3C10.2239 3 10 3.22386 10 3.5V4.5C10 4.52192 10.0031 4.54328 10.0059 4.56445C9.14063 4.78468 8.5 5.56622 8.5 6.5C8.5 7.43386 9.14051 8.21638 10.0059 8.43652C10.0032 8.45739 10 8.47842 10 8.5V12.5C10 12.7761 10.2239 13 10.5 13ZM10.5 7.5C9.94772 7.5 9.5 7.05228 9.5 6.5C9.5 5.94772 9.94772 5.5 10.5 5.5C11.0523 5.5 11.5 5.94772 11.5 6.5C11.5 7.05228 11.0523 7.5 10.5 7.5ZM5.5 10.5C4.94772 10.5 4.5 10.0523 4.5 9.5C4.5 8.94772 4.94772 8.5 5.5 8.5C6.05228 8.5 6.5 8.94772 6.5 9.5C6.5 10.0523 6.05228 10.5 5.5 10.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  --icon-24-globe: url("data:image/svg+xml,%3Csvg%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M12%205C15.866%205%2019%208.13401%2019%2012C19%2015.866%2015.866%2019%2012%2019C8.13401%2019%205%2015.866%205%2012C5%208.13401%208.13401%205%2012%205ZM10.0107%2012.5C10.063%2014.1231%2010.364%2015.5434%2010.7979%2016.5557C11.0375%2017.1149%2011.2977%2017.5039%2011.5352%2017.7383C11.7682%2017.9681%2011.924%2018%2012%2018C12.076%2018%2012.2318%2017.9681%2012.4648%2017.7383C12.7023%2017.5039%2012.9625%2017.1149%2013.2021%2016.5557C13.636%2015.5434%2013.937%2014.1231%2013.9893%2012.5H10.0107ZM6.02246%2012.5C6.22856%2014.9975%207.96276%2017.0599%2010.2891%2017.751C9.56496%2016.5758%209.07556%2014.675%209.00977%2012.5H6.02246ZM14.9902%2012.5C14.9244%2014.6756%2014.4334%2016.5759%2013.709%2017.751C16.0362%2017.0605%2017.7714%2014.9981%2017.9775%2012.5H14.9902ZM10.29%206.24805C7.96315%206.93875%206.2286%209.00212%206.02246%2011.5H9.00879C9.0746%209.32423%209.56549%207.42306%2010.29%206.24805ZM12%206C11.924%206%2011.7682%206.03186%2011.5352%206.26172C11.2977%206.49608%2011.0375%206.88507%2010.7979%207.44434C10.364%208.4566%2010.063%209.87694%2010.0107%2011.5H13.9893C13.937%209.87694%2013.636%208.4566%2013.2021%207.44434C12.9625%206.88507%2012.7023%206.49608%2012.4648%206.26172C12.2318%206.03186%2012.076%206%2012%206ZM13.709%206.24805C14.4337%207.42303%2014.9254%209.32396%2014.9912%2011.5H17.9775C17.7714%209.00179%2016.0363%206.93848%2013.709%206.24805Z'%20fill%3D'black'%20fill-opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E");
  
  --icon-16-globe: url("data:image/svg+xml,%3Csvg%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M8%203C10.7614%203%2013%205.23858%2013%208C13%2010.7614%2010.7614%2013%208%2013C5.23858%2013%203%2010.7614%203%208C3%205.23858%205.23858%203%208%203ZM7.01172%208.5C7.05823%209.57496%207.25084%2010.5045%207.51465%2011.1641C7.66771%2011.5467%207.82478%2011.7894%207.94824%2011.9199C7.96779%2011.9406%207.98583%2011.9553%208%2011.9678C8.01417%2011.9553%208.03221%2011.9406%208.05176%2011.9199C8.17522%2011.7894%208.33229%2011.5467%208.48535%2011.1641C8.74916%2010.5045%208.94177%209.57496%208.98828%208.5H7.01172ZM4.03223%208.5C4.22306%2010.0299%205.27727%2011.2898%206.69238%2011.7793C6.31652%2010.965%206.06265%209.80685%206.01074%208.5H4.03223ZM9.98926%208.5C9.93735%209.80705%209.68259%2010.965%209.30664%2011.7793C10.7222%2011.29%2011.7769%2010.0302%2011.9678%208.5H9.98926ZM9.30664%204.21973C9.6828%205.0341%209.93733%206.19252%209.98926%207.5H11.9678C11.7769%205.96968%2010.7223%204.70898%209.30664%204.21973ZM7.94824%204.08008C7.82478%204.21063%207.66771%204.45329%207.51465%204.83594C7.25084%205.49547%207.05823%206.42504%207.01172%207.5H8.98828C8.94177%206.42504%208.74916%205.49547%208.48535%204.83594C8.33229%204.45329%208.17522%204.21063%208.05176%204.08008C8.03198%204.05917%208.01427%204.04375%208%204.03125C7.98573%204.04375%207.96802%204.05917%207.94824%204.08008ZM6.69238%204.21973C5.27711%204.7092%204.22308%205.96999%204.03223%207.5H6.01074C6.06266%206.19272%206.31632%205.03408%206.69238%204.21973Z'%20fill%3D'black'%20fill-opacity%3D'0.9'%2F%3E%3C%2Fsvg%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 0.5px light-dark(rgba(0, 0, 0, 0.10), 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(rgba(0, 0, 0, 0.18), 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 {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    display: none;
    color-scheme: inherit;
    -webkit-appearance: none;
    margin: 0;
  }
}

progress {
  --progress-height: 0.375rem;
  --progress-radius: calc(var(--progress-height) / 2);

  display: block;
  width: 100%;
  min-width: 0;
  height: var(--progress-height);
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  font-size: 0;
  overflow: hidden;
  background: var(--figma-color-bg-secondary);
  border-radius: var(--progress-radius);

  &::-webkit-progress-bar {
    background: var(--figma-color-bg-secondary);
    border-radius: var(--progress-radius);
  }

  &::-webkit-progress-value {
    background: var(--figma-color-bg-brand);
    border-radius: var(--progress-radius);
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    min-width: var(--progress-height);
  }

  &:not([value]) {
    --progress-indeterminate-width: 30%;

    background-image:
      radial-gradient(
        circle at var(--progress-radius) 50%,
        var(--figma-color-bg-brand) 0 var(--progress-radius),
        transparent calc(var(--progress-radius) + 0.5px)
      ),
      linear-gradient(
        90deg,
        transparent 0 var(--progress-radius),
        var(--figma-color-bg-brand) var(--progress-radius)
          calc(100% - var(--progress-radius)),
        transparent calc(100% - var(--progress-radius)) 100%
      ),
      radial-gradient(
        circle at calc(100% - var(--progress-radius)) 50%,
        var(--figma-color-bg-brand) 0 var(--progress-radius),
        transparent calc(var(--progress-radius) + 0.5px)
      );
    will-change: background-position;
    background-repeat: no-repeat;
    background-size: var(--progress-indeterminate-width) 100%;
    animation: fig-progress-indeterminate 1s infinite linear;
  }

  &:not([value])::-webkit-progress-bar {
    background: transparent;
  }

  &:not([value])::-webkit-progress-value {
    background: transparent;
    box-shadow: none;
    min-width: 0;
  }

  &::-moz-progress-bar {
    background: var(--figma-color-bg-brand);
    border-radius: var(--progress-radius);
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    min-width: var(--progress-height);
  }

  &:not([value])::-moz-progress-bar {
    background: transparent;
    box-shadow: none;
    min-width: 0;
  }
}

@keyframes fig-progress-indeterminate {
  from {
    background-position: calc(-1 * var(--progress-indeterminate-width)) 0;
  }

  to {
    background-position: calc(100% + var(--progress-indeterminate-width)) 0;
  }
}

fig-input-number .fig-steppers {
  order: 3;
  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 {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

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


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

/* Native select popups in Chromium webviews do not reliably inherit themed
   option colors. Style only the popup rows so the closed control continues
   to resolve FigUI's light-dark tokens from the application color scheme. */
fig-dropdown > select {
  color: inherit;

  option,
  optgroup {
    color: #1e1e1e;
    background-color: #ffffff;
  }
}
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]:not([autoresize="false"]) select {
    field-sizing: content;
  }
}

/* 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;
  line-height: 1rem;
  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: Destructive */
  &[variant="destructive"] {
    background-color: var(--figma-color-bg-danger);
    color: var(--figma-color-text-ondanger);

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

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

  /* Variant: Destructive Secondary */
  &[variant="destructiveSecondary"] {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-danger);
    padding: 0 calc(var(--spacer-2) - 1px);
    background: none;
    color: var(--figma-color-text-danger);

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

    &:active,
    &:hover:active {
      box-shadow: inset 0 0 0 1px var(--figma-color-border-danger-strong);
      background-color: var(--figma-color-bg-danger-tertiary);
      color: var(--figma-color-text-danger-secondary);
    }
  }

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

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

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

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

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

    &:active {
      outline: 0;
      background-color: var(--figma-color-bg-danger-tertiary);
      color: var(--figma-color-text-danger-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]:not([icon="false"]) {
    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"]):not([variant="destructiveSecondary"]):not(
        [variant="destructiveGhost"]
      ):not(
        [variant="destructiveLink"]
      ) {
      color: var(--figma-color-text-ondisabled);
      box-shadow: none;
    }
    &[variant="secondary"],
    &[variant="destructiveSecondary"],
    &[variant="destructiveGhost"],
    &[variant="destructiveLink"],
    &[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]:not([icon="false"]),
  &[size="large"][icon]:not([icon="false"]) > button {
    width: var(--spacer-5);
    flex-basis: var(--spacer-5);
    padding: 0;
  }

  /* Full width */
  &[full]:not([full="false"]) {
    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],
  &[type="select"]:focus-within,
  &[type="upload"]:focus-within {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }
  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 {
  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;
  line-height: 1rem;
  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);
  }

  &:focus-visible,
  &[data-focus-visible] {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  &[disabled]:not([disabled="false"]) {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
  }
}
fig-tab-content {
  display: block;
  width: 100%;
}

.fig-overflow {
  all: unset;
  position: absolute;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  color: var(--figma-color-icon);
  background: var(--figma-color-bg) !important;

  &:before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-medium);
    background: var(--figma-color-bg) !important;
    z-index: -1;
  }

  &:hover:before{
    background: var(--figma-color-bg-hover) !important;
  }

  .fig-overflow-chevron{
    position: relative;
  }

  &:active .fig-overflow-chevron {
    transform: translateY(1px);
  }
}

.overflow-start > .fig-overflow-start {
  opacity: 1;
  pointer-events: auto;
}

.overflow-end > .fig-overflow-end {
  opacity: 1;
  pointer-events: auto;
}

fig-tabs,
.tabs {
  --fig-overflow-size: calc(var(--spacer-4) + var(--spacer-2));
  --fig-tabs-inline-padding: 0;
  --fig-tabs-margin-left: var(--spacer-1);
  --fig-tabs-margin-right: var(--spacer-2);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--spacer-1);
  min-width: 0;
  overflow: auto hidden;
  padding: var(--spacer-2) 0;
  padding-inline: var(--fig-tabs-inline-padding);
  margin: 0;
  margin-left: var(--fig-tabs-margin-left);
  margin-right: var(--fig-tabs-margin-right);
  position: relative;
  scrollbar-width: none;
  width: calc(100% - var(--fig-tabs-margin-left) - var(--fig-tabs-margin-right));

  > fig-tab {
    flex-shrink: 0;
  }

  > .fig-overflow {
    align-self: stretch;
    height: auto;
    margin-block: 0;
    position: sticky;
    top: 0;
    z-index: 3;
    width: var(--spacer-4);
    margin-left: calc(var(--spacer-2-5) * -1);
    margin-right: calc(var(--spacer-2-5) * -1);
  }

  > .fig-overflow-start {
    left: 0;
    order: -1;
    right: auto;
    box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);

    &:before{
      border-radius: var(--radius-medium) 0 0 var(--radius-medium);
    }

    .fig-overflow-chevron {
      rotate: 90deg;
    }
  }

  > .fig-overflow-end {
    left: auto;
    order: 1;
    right: 0;
    box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);

    &:before{
      border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
    }

    .fig-overflow-chevron {
      rotate: -90deg;
    }
  }
}

/* Avatar */
fig-avatar,
.fig-avatar {
  contain: layout paint;
  --size: 1.5rem;
  width: var(--size);
  flex-shrink: 0;
  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);
    font-size: var(--body-medium-fontSize);
  }
  &[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 {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  &::-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-swatch {
  --size: 1.5rem;
  --padding: 5px;
  --width: var(--size);
  --height: var(--size);
  --border-radius: var(--radius-medium);
  --swatch-background: linear-gradient(#d9d9d9, #d9d9d9);
  --swatch-bg-size: cover;
  --swatch-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);
  flex-shrink: 0;

  &::before,
  &::after,
  div,
  input {
    grid-area: 1/1;
  }
  & > div {
    background: var(--checkerboard-swatch);
    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(--swatch-background);
    background-size: var(--swatch-bg-size);
    background-position: var(--swatch-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;
  max-width: 100%;

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

  fig-button:has(> input[type="file"]:focus-visible) {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

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

fig-media,
fig-image,
fig-video {
  --fig-media-fit: contain;
  --fig-media-aspect-ratio: 4/3;
  --fig-media-size: 100%;
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacer-2);
  max-width: var(--fig-media-size);
  align-items: stretch;
  position: relative;

  &:has(> :is([slot="overlay"], fig-input-file[variant="overlay"])) {
    display: inline-grid;
    grid-template-areas: "media-preview";
  }

  &[size="small"] {
    --fig-media-size: 2rem;
    width: var(--fig-media-size);
  }
  &[size="medium"] {
    --fig-media-size: 4rem;
    width: var(--fig-media-size);
  }
  &[size="large"] {
    --fig-media-size: 6rem;
    width: var(--fig-media-size);
  }
  &[full]:not([full="false"]) {
    width: 100%;
  }

  &[aspect-ratio] {
    width: 100%;
  }

  > fig-preview {
    --fig-preview-fit: var(--fig-media-fit);
    width: 100%;
    max-width: var(--fig-media-size);
    aspect-ratio: var(--fig-media-aspect-ratio);
    min-height: 4rem;
  }

  &[size="small"] > fig-preview,
  &[size="medium"] > fig-preview,
  &[size="large"] > fig-preview,
  &[aspect-ratio] > fig-preview {
    min-height: auto;
  }

  &[checkerboard]:not([checkerboard="false"]) > fig-preview {
    background: var(--checkerboard);
  }

  > :is(fig-preview, [slot="overlay"], fig-input-file[variant="overlay"]) {
    grid-area: media-preview;
  }

  > fig-preview > video,
  > fig-preview > img,
  > fig-preview > .fig-media-element[data-generated] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--fig-preview-fit);
    object-position: center;
    z-index: 0;
  }

  > fig-spinner[slot="overlay"][data-loading-indicator][data-generated] {
    place-self: center;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
  }

  &:is(:not([src]), [src=""]):is(:not([poster]), [poster=""])
    > fig-preview > video.fig-media-element[data-generated] {
    opacity: 0;
    pointer-events: none;
  }
  &:not(:has(> fig-preview > img.fig-media-element[data-generated][src]:not([src=""]))) > fig-preview > img.fig-media-element[data-generated] {
    opacity: 0;
    pointer-events: none;
  }
  > fig-preview > fig-input-file:is([data-generated], [variant="overlay"]) {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: calc(100% - var(--spacer-4));
  }
  &:not(:has(> fig-preview > :is(img, video).fig-media-element[data-generated][src]:not([src=""]))) > fig-preview > fig-input-file:is([data-generated], [variant="overlay"]),
  > fig-preview:hover > fig-input-file:is([data-generated], [variant="overlay"]),
  > fig-preview:focus-within > fig-input-file:is([data-generated], [variant="overlay"]) {
    opacity: 1;
    pointer-events: all;
  }

  > :is([slot="overlay"], fig-input-file[variant="overlay"]) {
    place-self: center;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    max-width: calc(100% - var(--spacer-4));
  }

  &:not(:has(> fig-preview > :is(img, video).fig-media-element[data-generated][src]:not([src=""]))) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
  &:has(> fig-preview:hover) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
  &:has(> fig-preview:focus-within) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
  &:has(> [slot="overlay"]:is(:focus, :focus-within, :active)) > [slot="overlay"],
  &:has(> fig-input-file[variant="overlay"]:is(:focus, :focus-within, :active)) > fig-input-file[variant="overlay"],
  > [slot="overlay"]:focus-within,
  > fig-input-file[variant="overlay"]:focus-within {
    opacity: 1;
    pointer-events: all;
  }

  > fig-media-controls[data-generated] {
    position: static;
    width: 100%;
    pointer-events: auto;
  }

  > figcaption {
    display: block;
    width: 100%;
    color: var(--figma-color-text-secondary);
    font-size: var(--font-size-small);
    line-height: var(--line-height);
    text-align: left;
    white-space: normal;
  }
}

fig-media-controls {
  display: flex;
  align-items: center;
  gap: var(--spacer-1);
  width: 100%;

  &[overlay]:not([overlay="false"]) {
    border-radius: var(--radius-medium);
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
    color-scheme: light;
    padding: var(--spacer-1);
    box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);
  }

  &[disabled]:not([disabled="false"]) {
    pointer-events: none;
    color: var(--figma-color-text-disabled);

    .fig-media-controls-time {
      color: var(--figma-color-text-disabled);
    }
  }

  > fig-slider {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fig-media-controls-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-right: var(--spacer-2);
    padding-left: var(--spacer-1);
  }
}

/* Easing Curve */
fig-easing-curve {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-2);
  --stroke-width: 2;
  --easing-bezier-handle-radius: 5;
  --easing-spring-handle-radius: 5;
  --easing-handle-fill: var(--figma-color-border-strong);
  --easing-duration-bar-width: 7;
  --easing-duration-bar-height: 16;
  --easing-duration-bar-radius: 4;
  --aspect-ratio: 1 / 1;

  width: 100%;
  .fig-easing-curve-svg {
    width: 100%;
    aspect-ratio: var(--aspect-ratio);
    overflow: visible;
  }
  .fig-easing-curve-svg-container {
    border-radius: var(--radius-medium);
    background: var(--figma-color-bg-secondary);
    padding: var(--spacer-3);
    overflow: hidden;
    &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
      overflow: visible;
    }
  }
  &.spring-mode {
    .fig-easing-curve-svg-container,
    .fig-easing-curve-svg {
      cursor: ew-resize;
    }
  }
  &.spring-mode.spring-bounce-dragging {
    .fig-easing-curve-svg-container,
    .fig-easing-curve-svg,
    .fig-easing-curve-handle[data-handle="bounce"],
    .fig-easing-curve-handle[data-handle="bounce"] fig-handle,
    .fig-easing-curve-handle[data-handle="bounce"] .fig-handle-hit-area {
      cursor: ns-resize;
    }
  }
  .fig-easing-curve-boundary,
  .fig-easing-curve-bounds,
  .fig-easing-curve-arm,
  .fig-easing-curve-path,
  .fig-easing-curve-target {
    pointer-events: none;
  }
  .fig-easing-curve-boundary {
    stroke: var(--figma-color-bordertranslucent);
    stroke-width: var(--stroke-width);
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .fig-easing-curve-bounds {
    fill: transparent;
  }
  .fig-easing-curve-arm {
    stroke: var(--figma-color-bordertranslucent);
    stroke-width: var(--stroke-width);
    stroke-linejoin: round;
    stroke-linecap: round;

    &.is-active {
      stroke: var(--figma-color-bg-brand);
    }
  }
  .fig-easing-curve-path {
    fill: none;
    stroke: var(--figma-color-text);
    stroke-width: var(--stroke-width);
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .fig-easing-curve-target {
    stroke: var(--figma-color-bordertranslucent);
    stroke-width: var(--stroke-width);
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .fig-easing-curve-handle {
    overflow: visible;
    pointer-events: all;
    cursor: default;
  }
  &.spring-mode .fig-easing-curve-handle[data-handle="bounce"],
  &.spring-mode .fig-easing-curve-handle[data-handle="bounce"] fig-handle,
  &.spring-mode .fig-easing-curve-handle[data-handle="bounce"] .fig-handle-hit-area {
    cursor: ns-resize;
  }
  .fig-easing-curve-select {
    [slot="prepend"] svg {
      vertical-align: middle;
    }
  }
}

/* 3D Rotate */
fig-3d-rotate {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-2);
  width: 100%;
  --aspect-ratio: 1 / 1;
  --perspective: 20rem;
  --perspective-origin: 50% 50%;
  --transform-origin: 50% 50% -50cqi;
  --gradient-start-color: light-dark(
    rgba(0, 0, 0, 0.05),
    rgba(255, 255, 255, 0.05)
  );
  --border-width: 1px;
  --border-start-color: light-dark(
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1)
  );
  --border-end-color: transparent;
  --gradient-end-color: transparent;
  --figma-3d-rotate-handle-size: 6px;
  --front-face-bg: light-dark(var(--figma-color-bg), #555);

  fig-field:not([direction="vertical"]) & {
    flex: 1;
    min-width: 0;
  }

  > fig-input-number {
    flex: 0 0 auto;
    width: 100%;
  }

  .fig-3d-rotate-container {
    flex: 1 1 100%;
    border-radius: var(--radius-medium);
    background: var(--figma-color-bg-secondary);
    padding: 0 2.5rem;
    width: 100%;
    aspect-ratio: var(--aspect-ratio);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    overflow: hidden;

    &.dragging,
    &:active {
      cursor: grabbing;
    }
    &:focus {
      outline: 0;
    }
  }

  .fig-3d-rotate-scene {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: max(3.5rem, 50%);
    max-width: max(3.5rem, 50%);
    perspective: var(--perspective, 20rem);
    perspective-origin: var(--perspective-origin, 50% 50%);
    container-type: inline-size;
  }

  .fig-3d-rotate-cube {
    width: 100%;
    height: 100%;
    position: relative;
    aspect-ratio: 1 / 1;
    transform-style: preserve-3d;
    transform-origin: var(--transform-origin, 50% 50% -50cqi);
  }

  .fig-3d-rotate-face {
    position: absolute;
    inset: 0;
    backface-visibility: visible;
    background: linear-gradient(
      to bottom,
      var(--gradient-start-color),
      var(--gradient-end-color)
    );
    &.selected {
      background: var(--figma-color-border-strong) !important;
      inset: -1px;
      border-radius: var(--radius-medium);
      border: 1px solid var(--figma-color-border);
    }

    &.front {
      background: var(--front-face-bg);
      border-radius: var(--radius-medium);
      transform-style: preserve-3d;
      border: 1px solid var(--figma-color-bordertranslucent);
      inset: -1px;

      &::after {
        content: "";
        position: absolute;
        width: var(--figma-3d-rotate-handle-size);
        height: var(--figma-3d-rotate-handle-size);
        border-radius: 50%;
        background: var(--figma-color-icon-brand);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        backface-visibility: hidden;
      }
    }
    &.back {
      transform-origin: 100% 50%;
      transform: translateX(-100%) rotateY(-0.25turn) translateX(-100%)
        rotateY(-0.25turn);
      background: linear-gradient(
        to bottom,
        var(--border-start-color),
        var(--border-end-color)
      );
      border-radius: var(--radius-medium);
    }
    &.right {
      transform-origin: 0% 50%;
      transform: translateX(100%) rotateY(0.25turn);
      background: linear-gradient(
        to right,
        var(--gradient-start-color),
        var(--gradient-end-color)
      );
      border-width: var(--border-width) 0;
      border-style: solid;
      border-image: linear-gradient(
          to right,
          var(--border-start-color),
          var(--border-end-color)
        )
        1;
    }
    &.left {
      transform-origin: 100% 50%;
      transform: translateX(-100%) rotateY(-0.25turn);
      background: linear-gradient(
        to left,
        var(--gradient-start-color),
        var(--gradient-end-color)
      );
      border-width: var(--border-width) 0;
      border-style: solid;
      border-image: linear-gradient(
          to left,
          var(--border-start-color),
          var(--border-end-color)
        )
        1;
    }
    &.top {
      translate: 0 -100%;
      transform-origin: 50% 100%;
      transform: rotateX(0.25turn);
      background: linear-gradient(
        to top,
        var(--gradient-start-color),
        var(--gradient-end-color)
      );
      border-width: 0 var(--border-width);
      border-style: solid;
      border-image: linear-gradient(
          to top,
          var(--border-start-color),
          var(--border-end-color)
        )
        1;
    }
    &.bottom {
      top: 100%;
      bottom: auto;
      transform-origin: 50% 0%;
      transform: rotateX(-0.25turn);
      background: linear-gradient(
        to bottom,
        var(--gradient-start-color),
        var(--gradient-end-color)
      );
      border-width: 0 var(--border-width);
      border-style: solid;
      border-image: linear-gradient(
          to bottom,
          var(--border-start-color),
          var(--border-end-color)
        )
        1;
    }
  }
}

/* Origin Grid */
fig-origin-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacer-2);
  --aspect-ratio: 1 / 1;
  --origin-grid-dot-size: 0.125rem;
  --origin-grid-handle-size: 0.75rem;
  --origin-grid-height: var(--spacer-4);

  fig-field:not([direction="vertical"]) & {
    flex: 1;
    min-width: 0;
  }

  .fig-origin-grid-surface {
    width: 100%;
    aspect-ratio: var(--aspect-ratio);
    min-height: calc(var(--origin-grid-height) * 3);
  }

  .origin-grid {
    position: relative;
    container-type: size;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-medium);
    background: var(--figma-color-bg-secondary);
    user-select: none;
    cursor: default;

    &.is-dragging {
      cursor: grabbing !important;

      fig-handle {
        cursor: grabbing !important;
      }
    }

    &.drag-disabled {
      fig-handle {
        cursor: default;
      }
    }
  }

  .origin-grid-cells {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .origin-grid-cell {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: var(--origin-grid-height);
    color: var(--figma-color-icon-tertiary);
    pointer-events: none;

    .origin-grid-dot {
      width: var(--origin-grid-dot-size);
      height: var(--origin-grid-dot-size);
      border-radius: var(--radius-small);
      background: currentColor;
    }

    &.is-hovered {
      color: var(--figma-color-bg-onselected);

      .origin-grid-dot {
        width: var(--origin-grid-handle-size);
        height: var(--origin-grid-handle-size);
      }
    }
  }

  fig-handle {
    --origin-overflow-rotation: 0deg;
    --origin-overflow-nudge-base: var(--spacer-2-5);
    --origin-overflow-nudge-x: 0px;
    --origin-overflow-nudge-y: 0px;
    --origin-overflow-nudge-x-scale: calc((100cqb / 100cqi) * -1);
    --origin-overflow-nudge-y-scale: calc((100cqb / 100cqi) * -1);
    --width: var(--origin-grid-handle-size);
    --height: var(--origin-grid-handle-size);
    --border-radius: var(--radius-small);
    --fig-handle-padding: 2.5px;
    --fig-handle-inner-radius: 0;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(
        calc(-50% + var(--origin-overflow-nudge-x)),
        calc(-50% + var(--origin-overflow-nudge-y))
      )
      rotate(var(--origin-overflow-rotation));
    cursor: default;
    touch-action: none;

    &:focus-visible {
      --figma-focus-outline-offset: 1px;
      outline: var(--figma-focus-outline);
      outline-offset: var(--figma-focus-outline-offset);
    }

    &.beyond-bounds-x,
    &.beyond-bounds-y {
      -webkit-mask-image: var(--icon-24-arrow-left);
      mask-image: var(--icon-24-arrow-left);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: 24px 24px;
      mask-size: 24px 24px;
      --fig-handle-inner-bg: transparent !important;
      --fig-handle-outline-color: transparent !important;
      --fig-handle-inner-outline: none;
      --border-radius: 0;
      --box-shadow: none;
    }

    &.beyond-bounds-x.overflow-right {
      --origin-overflow-rotation: 180deg;
    }

    &.beyond-bounds-y:not(.beyond-bounds-x) {
      --origin-overflow-rotation: 90deg;
    }

    &.beyond-bounds-y.overflow-down:not(.beyond-bounds-x) {
      --origin-overflow-rotation: -90deg;
    }

    &.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-up {
      --origin-overflow-rotation: 45deg;
    }

    &.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-down {
      --origin-overflow-rotation: -45deg;
    }

    &.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-up {
      --origin-overflow-rotation: 135deg;
    }

    &.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-down {
      --origin-overflow-rotation: -135deg;
    }

    &.overflow-left {
      --origin-overflow-nudge-x: calc(
        var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale)
      );
    }

    &.overflow-right {
      --origin-overflow-nudge-x: calc(
        var(--origin-overflow-nudge-base) *
          var(--origin-overflow-nudge-x-scale) * -1
      );
    }

    &.overflow-up {
      --origin-overflow-nudge-y: calc(
        var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale)
      );
    }

    &.overflow-down {
      --origin-overflow-nudge-y: calc(
        var(--origin-overflow-nudge-base) *
          var(--origin-overflow-nudge-y-scale) * -1
      );
    }
  }

  .origin-values {
    display: flex;
    gap: var(--spacer-2);

    > fig-input-number {
      flex: 1 1 0;
      min-width: 0;
      width: 0;
    }
  }
}

/* Combo input */
fig-combo-input {
  display: inline-flex;
  flex: 1;
  min-width: 0;

  > .input-combo {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  fig-input-text {
    flex: 1 1 auto;
    min-width: 0;
  }
}

fig-combo-input fig-button[type="select"] {
  > fig-dropdown,
  > fig-dropdown > select {
    width: 100%;
    height: 100%;
    min-width: 100%;
    padding: 0;
  }
}

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

  & > label {
    align-self: stretch;
    color: var(--figma-color-text);
  }

  & > *:not(fig-swatch){
    &:first-child:not(:last-child),
    &:first-child:not(:last-child) > * {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child:not(:first-child),
    &:last-child:not(:first-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;
    }
  }
}

/* Input Fill label */
.fig-input-fill-label {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--spacer-2) 0 var(--spacer-1);
  height: var(--control-height);
  font-size: var(--font-size-small);
  color: var(--figma-color-text-secondary);
  background: var(--figma-color-bg-secondary);
  flex: 1;
  min-width: 0;
  user-select: none;
  margin-left: -1px;
}

input[type="checkbox"] {
  flex-shrink: 0;
}

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

  &[indeterminate="true"]:after {
    width: 0.625rem;
    height: 0.125rem;
    transform: none;
  }

  &[indeterminate="true"],
  &:checked {
    background-color: var(--figma-color-bg-brand);
  }

  &:checked:after {
    transform: translate(
      calc(
        (var(--width) - var(--knob-width)) * 0.5 +
          (var(--height) - var(--knob-height)) * -0.5
      )
    );
  }

  &:disabled {
    background-color: transparent;
    cursor: not-allowed;
    &:after {
      background-color: var(--figma-color-icon-disabled);
      box-shadow: none;
    }

    &:checked,
    &[indeterminate="true"] {
      background-color: var(--figma-color-bg-disabled);
      box-shadow: none;
      &:after {
        background-color: var(--figma-color-bg);
      }
    }
  }

  &:focus, &:focus-within {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }
}

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

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

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

  &:focus {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);

    &:not(:checked) {
      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    }
  }
  &:disabled{
    background-color: var(--figma-color-bg-disabled);
    box-shadow: none;
    &::after {
      background-color: transparent;
    }
  }
  &:disabled:checked{
    &::after {
      background-color: var(--figma-color-icon-disabled);
    }
  }
}
/* Light theme checkbox hover (black checkmark preview) */
/* @media is a no-JS fallback — ignored when setTheme() sets classes */
@media (prefers-color-scheme: light) {
  :root:not(.figma-dark):not(.figma-light)
    input[type="checkbox"]:not(.switch):not(:disabled):hover {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
  }
}

/* Class-based light theme override (primary mechanism via setTheme()) */
:root.figma-light input[type="checkbox"]:not(.switch):not(:disabled):hover {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
}

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

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

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

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

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

  &:focus {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

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

  &:disabled {
    background-color: transparent;
    cursor: not-allowed;
    &:after {
      background-color: var(--figma-color-icon-disabled);
      box-shadow: none;
    }
    &:checked {
      background-color: var(--figma-color-bg-disabled);
      box-shadow: none;
      &:after {
        background-color: var(--figma-color-icon-disabled);
      }
    }
  }

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

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

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

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

  & > legend {
    padding: 0;
  }

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

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

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

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

    &::before {
      opacity: 1;
    }
  }

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

/* Sliders */
fig-slider {
  --slider-field-height: 1.5rem;
  --slider-height: 1rem;
  --slider-thumb-size: var(--slider-height);
  --slider-thumb-width: var(--slider-thumb-size);
  --slider-thumb-height: var(--slider-thumb-size);
  --slider-thumb-color: var(--handle-color);
  --slider-thumb-radius: calc(var(--slider-thumb-width) / 2);
  --slider-thumb-opacity: 1;
  --slider-thumb-outline: none;
  --slider-thumb-outline-offset: 2px;
  --slider-tick-opacity: 1;
  --slider-tick-radius: 100%;
  --slider-border-radius: calc(var(--slider-height) / 2);
  --slider-stepper-padding: calc(
    (var(--slider-height) / 2) - var(--slider-tick-width) / 2
  );
  --slider-percent: calc(var(--slider-complete) * 100%);
  --start-percent: calc(var(--default, 0) * 100%);
  --slider-tick-width: calc(var(--slider-height) / 4);
  --slider-tick-height: calc(var(--slider-height) / 4);
  --slider-handle-shadow:
    inset 0 0 0 calc(4px + 0.5rem * var(--unchanged)) var(--slider-thumb-color),
    0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
  --slider-handle-shadow-focus:
    inset 0 0 0 4px var(--slider-thumb-color),
    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--handle-shadow),
    0 0 0 1px var(--figma-color-border-selected);
  --slider-transition: none;
  --handle-transition: var(--slider-transition);
  --slider-checkerboard: var(--checkerboard);

  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  height: var(--slider-field-height);
  transition: var(--slider-transition);
  outline: none;

  &:has(input[type="range"]:focus-visible) {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  & .slider {
    flex: 1 1 0;
    min-width: 0;
  }

  & fig-input-number {
    flex: 0 0 3rem;
  }

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

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

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

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

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

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: none;
    }

    &:disabled {
      cursor: not-allowed;
    }

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

    &::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      color-scheme: inherit;
      transition: var(--handle-transition);
      border-radius: var(--slider-thumb-radius);
      height: var(--slider-thumb-height);
      width: var(--slider-thumb-width);
      margin-top: calc(
        var(--slider-height) / 2 - var(--slider-thumb-height) / 2
      );
      outline: var(--slider-thumb-outline);
      outline-offset: var(--slider-thumb-outline-offset);
      aspect-ratio: 1;
      border: none;
      position: relative;
      z-index: 1;
      cursor: default;
      box-shadow: var(--slider-handle-shadow);
      opacity: var(--slider-thumb-opacity);
    }

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

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

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

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

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

    /* Firefox thumb */
    &:active::-moz-range-thumb {
      cursor: grabbing;
    }

    &::-moz-range-thumb {
      appearance: none;
      -moz-appearance: none;
      background: transparent;
      color-scheme: inherit;
      transition: var(--handle-transition);
      border-radius: var(--slider-thumb-radius);
      height: var(--slider-thumb-height);
      width: var(--slider-thumb-width);
      outline: var(--slider-thumb-outline);
      outline-offset: var(--slider-thumb-outline-offset);
      aspect-ratio: 1;
      border: none;
      position: relative;
      z-index: 1;
      cursor: default;
      box-shadow: var(--slider-handle-shadow);
      opacity: var(--slider-thumb-opacity);
    }

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

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

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

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

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

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

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

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

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

    background-color: var(--figma-color-bg-secondary);
    border-radius: var(--radius-medium);
    padding-left: var(--spacer-2);

    &[text="false"] {
      padding-right: var(--spacer-2);
    }

    .fig-slider-input-container {
      height: var(--slider-height);
      position: relative;
      display: block;
      width: 100%;
      box-shadow: none;
      background-color: var(--figma-color-bg-tertiary);
    }
    fig-input-text,
    fig-input-number {
      flex-basis: var(--slider-number-width);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 1px solid var(--figma-color-bg);
    }

    &:hover,
    &:focus-within {
      fig-input-text,
      fig-input-number {
        height: auto;
      }
    }
    
  }
}

/* Popovers/Dialogs */
.dialog,
dialog,
.popover,
[popover] {
  --dialog-radius: var(--radius-large, 0.8125rem);
  --dialog-max-width: calc(100vw - var(--spacer-4));
  padding: 0;
  outline: 0;
  border: 0;
  inset: auto;
  
  color: var(--figma-color-text);
  border-radius: var(--dialog-radius);
  background: var(--figma-color-bg);
  min-width: min(var(--popover-min-width), var(--dialog-max-width));
  box-shadow: var(--figma-elevation-500-modal-window);
  max-height: calc(60vh - var(--spacer-4));
  max-width: min(var(--dialog-max-width), 30rem);
  height: max-content;
  & > fig-content,
  &> main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

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

  &[open]:not([open="false"]){
    display: flex;
    flex-direction: column;
  }
}
dialog[is="fig-dialog"] {
  /* Non-modal stacking is assigned in FigDialog.show() via figGetHighestZIndex. */

  &[autoresize]:not([autoresize="false"]) {
    height: max-content;
  }

  &[resizable]:not([resizable="false"]) {
    resize: both;
    overflow: auto;
    min-height: 6rem;
  }
  & > iframe{
    border-radius: 0 0 var(--dialog-radius) var(--dialog-radius);
    overflow: hidden;
    border: none;
  }
}

dialog[is="fig-popup"] {
  --z-index: 999999;
  --fig-popup-beak-offset: 50%;
  --fig-popup-beak-width: 1rem;
  --fig-popup-beak-height: 6px;
  --fig-popup-radius: var(--radius-large);
  --fig-popup-bg-color: var(--figma-color-bg);
  --fig-popup-tip-clip-path: path(
    "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
  );

  z-index: var(--z-index);
  position: fixed;
  margin: 0;
  min-width: 0;
  padding: 0;
  overflow: auto;
  border-radius: var(--fig-popup-radius);
  background-color: var(--fig-popup-bg-color);

  &[autoresize]:not([autoresize="false"]) {
    width: max-content;
    max-width: calc(100vw - var(--spacer-4));
    max-height: calc(100vh - var(--spacer-4));
  }

  &[open]:not([open="false"]) {
    display: block;
  }


  &[theme="dark"] {
    color-scheme: dark;
    --fig-popup-bg-color: var(--figma-color-bg);
  }

  &[theme="light"] {
    color-scheme: light;
  }

  &[theme="brand"],
  &[theme="canvas"] {
    --fig-popup-bg-color: var(--figma-color-bg-brand);
    color-scheme: dark;
  }

  &[theme="menu"] {
    --fig-popup-bg-color: var(--figma-color-bg-menu);
    color: var(--figma-color-text-menu);
    color-scheme: dark;
    padding: var(--spacer-2) 0;
    min-width: 6rem;
    box-shadow: var(--figma-elevation-100);

    &.fig-menu-popup {
      max-height: calc(100vh - 1rem);
      padding: 0;
      overflow: hidden;
    }
  }

  &[variant="tooltip"],
  &[variant="popover"] {
    overflow: visible;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
      drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
      drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));

    &:after {
      content: "";
      background-color: inherit;
      clip-path: var(--fig-popup-tip-clip-path);
      position: absolute;
      width: var(--fig-popup-beak-width);
      height: var(--fig-popup-beak-height);
      z-index: 2;
      pointer-events: none;
    }

    &[data-beak-side="bottom"]:after {
      top: calc(100% - 1px);
      left: var(--fig-popup-beak-offset, 50%);
      transform: translateX(-50%);
    }

    &[data-beak-side="top"]:after {
      top: 1px;
      left: var(--fig-popup-beak-offset, 50%);
      transform: translate(-50%, -100%) scaleY(-1);
    }

    &[data-beak-side="left"]:after {
      left: var(--fig-popup-beak-height);
      top: var(--fig-popup-beak-offset, 50%);
      transform: translate(-100%, -50%) rotate(90deg);
    }

    &[data-beak-side="right"]:after {
      left: calc(100% - var(--fig-popup-beak-height));
      top: var(--fig-popup-beak-offset, 50%);
      transform: translate(0, -50%) rotate(-90deg);
    }
  }
  &[variant="tooltip"] {
    --fig-popup-radius: var(--radius-medium, 0.3125rem);
    --fig-popup-tip-clip-path: var(--tip-pointer);

    line-height: 1rem !important;
    max-width: 180px;
    width: max-content;
    padding: 0;
    min-width: 0;
    box-shadow: inset 0 0.5px 0 0
    light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
    filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
      drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
      drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
    pointer-events: none;

    & > span {
      text-wrap: balance;
      max-height: 2.5rem;
      overflow-y: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      text-overflow: ellipsis;
      width: auto;
      padding: var(--spacer-1) var(--spacer-2);
    }
    &[theme="canvas"]{
      --fig-popup-radius: 3px;
      box-shadow: none;
      filter: none;
      & > span{
        padding: 0.125rem 0.375rem;
      }
    }

    &[pointer="false"]::after {
      display: none !important;
    }
  }

}

/* Tooltip */
[data-figui-overlay-root] {
  position: fixed;
  inset: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
}

fig-tooltip {
  display: contents;
}

fig-preview {
  --fig-preview-fit: contain;
  --fig-preview-background: var(--figma-color-bg-secondary);
  --fig-preview-aspect-ratio: 4/3;

  display: block;
  aspect-ratio: var(--fig-preview-aspect-ratio);
  place-items: center;
  min-width: 0;
  max-width: 100%;
  background-color: var(--fig-preview-background);
  border-radius: var(--radius-medium);
  position: relative;
  overflow: hidden;

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

  &[checkerboard]:not([checkerboard="false"]) {
    background: var(--checkerboard);
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
    pointer-events: none;
    z-index: 2;
  }

  > :is(img, video, canvas, svg) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--fig-preview-fit);
    object-position: center;
  }
}

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

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

fig-dropdown {
  &[full]:not([full="false"]) {
    display: flex;
    width: 100%;
  }
}

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

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

fig-checkbox {
  align-items: flex-start;
}

fig-radio {
  align-items: center;
}

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

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

fig-header {
  --fig-header-height: var(--spacer-6);
  height: var(--fig-header-height);
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: var(--spacer-1) var(--spacer-3);
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
  gap: var(--spacer-2);
  user-select: none;

  &[compact]:not([compact="false"]) {
    --fig-header-height: var(--spacer-5);
  }

  & > fig-button:last-child[icon]:not([icon="false"])[variant="ghost"],
  & > fig-tooltip:last-child > fig-button[icon]:not([icon="false"])[variant="ghost"],
  & > fig-menu:last-child > fig-button[fig-menu-trigger][icon]:not([icon="false"])[variant="ghost"] {
    margin-right: calc(var(--spacer-2) * -1);
  }

  & > fig-input-text:only-child {
    width: 100%;
  }

  &>fig-dropdown,
  &>fig-select{
    &:first-child{
      margin-left: calc(var(--spacer-2) * -1);
    }
  }

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

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

  &[borderless]:not([borderless="false"]) {
    box-shadow: none;
  }
}

fig-group {
  display: block;
  width: 100%;
  margin-bottom: var(--spacer-2-5);

  

  p{
    margin: 0 var(--spacer-3) var(--spacer-2) var(--spacer-3);
  }

  /* Sibling groups  */
  & + fig-group {
    box-shadow: inset 0 1px 0 0 var(--figma-color-border);
    &:not([name]) {
      padding-top: var(--spacer-2-5);
    }
  }
  &[borderless]:not([borderless="false"]) + fig-group{
    box-shadow: none;
    &:not([name]) {
      padding-top: 0;
    }
  }

  &[compact]:not([compact="false"]) {
    & > fig-header{
      --fig-header-height: var(--spacer-5);
    }
  }


  & > fig-header {
    cursor: default;
    padding-left: var(--spacer-3);
      
    &:focus-visible {
      --figma-focus-outline-radius: var(--radius-medium);
      outline: var(--figma-focus-outline);
      outline-offset: var(--figma-focus-outline-offset);
      border-radius: var(--figma-focus-outline-radius);
    }
    h3 {
      margin:0;
      .fig-group-chevron {
        --icon: var(--icon-16-chevron);
        --size: 1rem;
        color: var(--figma-color-text-tertiary);
        transform: rotate(-90deg);
        transition: transform var(--transition-duration)
          var(--transition-timing-function);
        margin-left: calc(var(--spacer-3) * -1);
      }
    }
  }

  &[collapsible] > fig-header h3 {
    user-select: none;
  }

  &[collapsible]:not([open]):not([open="true"]),
  &[collapsible][open="false"] {
    margin-bottom: 0;
    fig-header {
      color: var(--figma-color-text-secondary);
      &:hover {
        color: var(--figma-color-text);
        .fig-group-chevron {
          color: inherit;
        }
      }
    }
  }

  &[open]:not([open="false"]) > fig-header .fig-group-chevron {
    transform: rotate(0deg);
  }

  &[collapsible]:not([open]):not([open="true"]) > :not(fig-header),
  &[collapsible][open="false"] > :not(fig-header) {
    display: none;
  }

  &[compact]:not([compact="false"]) > fig-header {
    --fig-header-height: var(--spacer-5);
    height: var(--fig-header-height);
  }
}

fig-footer {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--spacer-2);
  padding: var(--spacer-2-5);
  box-shadow: inset 0 1px 0 0 var(--figma-color-border);

  & h3 {
    font-weight: var(--body-medium-strong-fontWeight);
    flex-grow: 1;
    display: flex;
    align-items: baseline;
    gap: var(--spacer-half);
  }

  & > label {
    flex-grow: 1;
    align-items: baseline;
    gap: var(--spacer-half);
    min-height: var(--spacer-4);
    display: flex;
    align-items: center;
    text-wrap: pretty;
  }

  & > fig-button {
    flex-shrink: 0;
  }

  &:not(:has(> fig-button)) > :is(label, h3) {
    flex-grow: 1;
    justify-content: center;
    text-align: center;
  }

  &:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
    flex-wrap: wrap;

    & > :is(label, h3) {
      flex-grow: 1;
      width: 100%;
      justify-content: flex-start;
      text-align: start;
      
    }
  }

  &[borderless]:not([borderless="false"]) {
    box-shadow: none;
  }

  &[sticky]:not([sticky="false"]) {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: auto;
    background: var(--figma-color-bg);
  }
}

main,
fig-content {
  padding: var(--spacer-2-5) 0;
  display: block;
  width: 100%;
  gap: 0;
  &:has(>fig-group[name]:first-child){
    padding-top: 0;
  }
  &:has(>fig-group[name]:last-child){
    padding-bottom: 0;
  }
}

fig-content[padding]:not([padding="false"]) {
  padding-inline: var(--spacer-3);
}

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

:root [hidden],
[hidden] {
  display: none !important;
}

hstack,
.hstack{
  display: flex;
  gap: var(--hstack-gap, var(--spacer-2));
  align-items: var(--hstack-align, center);
  justify-content: var(--hstack-justify, flex-start);
  flex-wrap: var(--hstack-wrap, nowrap);

  &[align="start"] {
    --hstack-align: flex-start;
  }

  &[align="end"] {
    --hstack-align: flex-end;
  }

  &[align="stretch"] {
    --hstack-align: stretch;
  }

  & > fig-field:has(+ fig-field) {
    --fig-field-right-padding: var(--spacer-1);
  }

  & > fig-field + fig-field {
    --fig-field-left-padding: var(--spacer-1);
  }
}

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


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

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

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

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

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

  &[type="search"]:not([data-search-has-value]) [data-generated="search-clear"] {
    visibility: hidden;
    pointer-events: none;
  }

  & [slot="prepend"],
  & [slot="append"] {
    svg {
      *[fill]:not([fill="none"]) {
        fill: currentColor;
      }
      *[stroke]:not([stroke="none"]) {
        stroke: currentColor;
      }
    }
  }

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

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

  & input[type="text"]:focus,
  & input[type="text"]:active {
    outline: 0 !important;
    box-shadow: none !important;
  }

  & input[type="search"] {
    appearance: textfield;
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      appearance: none;
      display: none;
    }
  }

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

fig-input-number > [slot],
fig-input-text[type="number"] > [slot] {
  cursor: ew-resize !important;
}

fig-input-color,
fig-input-gradient,
fig-input-fill {
  background-color: var(--figma-color-bg-secondary);
  border-radius: var(--radius-medium);
  box-shadow: none !important;
  &:focus,
  &:focus-within,
  &.has-popup-open {
    outline: var(--figma-focus-outline) !important;
    outline-offset: var(--figma-focus-outline-offset) !important;
  }
  &:hover {
    outline: 1px solid var(--figma-color-border);
    outline-offset: -1px !important;
  }

  & > .input-combo > fig-swatch:not(:only-child),
  & > .input-combo > fig-swatch:not(:only-child) input,
  & > .input-combo > fig-fill-picker:not(:only-child),
  & > .input-combo > fig-fill-picker:not(:only-child) > fig-swatch > input,
  & > .input-combo > label,
  & fig-fill-picker:not(:only-child),
  fig-input-text,
  fig-swatch {
    &,
    &:focus,
    &:hover {
      background-color: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
      border: 0 !important;
      --selected: 0;
    }
  }
  fig-swatch ~ fig-input-text > input,
  fig-swatch ~ label,
  fig-fill-picker ~ fig-input-text > input {
    padding-left: 0 !important;
  }

  & > .input-combo > fig-input-text > input {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & > .input-combo {
    flex: 1;
    min-width: 0;
  }

  & > .input-combo > fig-tooltip {
    display: contents;
  }

  & > .input-combo > fig-tooltip > .fig-input-fill-opacity {
    flex: 0 0 var(--input-opacity-width);
    width: var(--input-opacity-width);
    min-width: var(--input-opacity-width);
  }

  fig-input-number {
    flex: 0;
    flex-basis: var(--input-opacity-width);
    box-shadow: inset 1px 0 0 0 var(--figma-color-bg) !important;
    background-color: transparent !important;
    outline: 0 !important;

    &:focus,
    &:focus-within,
    &:hover {
      outline: 0 !important;
    }
  }

  fig-field:not([direction="vertical"]) & {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
}

fig-input-color,
fig-input-fill,
fig-input-text,
fig-input-number {
  width: 8.9375rem;
}

fig-input-fill {
  & > .input-combo > fig-fill-picker {
    display: contents;
  }

  & > .input-combo > :is(.fig-input-fill-hex, .fig-input-fill-label) {
    flex: 1 1 0;
    min-width: 0;
  }

  & > .input-combo > .fig-input-fill-label {
    height: auto;
    margin-left: 0;
    overflow: hidden;
    padding: var(--spacer-1) var(--spacer-2);
    padding-left: 0 !important;
    font: inherit;
    line-height: 1rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

fig-input-color {
  & > .input-combo > fig-tooltip > fig-input-number {
    flex: 0 0 var(--input-opacity-width);
    width: var(--input-opacity-width);
    min-width: var(--input-opacity-width);    
  }

  & > .input-combo > fig-input-text {
    flex: 1 1 0;
    min-width: 0;
  }
}

fig-input-gradient {
  --fig-input-gradient-height: 1.5rem;
  --fig-input-gradient-padding: var(--spacer-1);
  --fig-input-gradient-handle-size: 14px;
  --fig-input-gradient-swatch-border-radius: var(--radius-large);
  position: relative;
  height: var(--fig-input-gradient-height);
  width: 100%;
  min-width: var(--spacer-4);

  fig-handle[type="color"]{
    --height: var(--fig-input-gradient-handle-size);
    --width: var(--fig-input-gradient-handle-size);
    --fig-handle-padding: 0.125rem;
   
  }

  &:focus,
  &:active {
    outline: var(--figma-focus-outline) !important;
    outline-offset: var(--figma-focus-outline-offset) !important;
  }
  &:focus-within:not(:focus) {
    outline: 0 !important;
  }
  &[mode="tip"]{
    fig-handle[type="color"]{
      --fig-handle-bg: transparent;
      --fig-handle-inner-bg: transparent;
      --fig-handle-outline: none;
      --fig-handle-outline-color: transparent;
      --fig-handle-shadow: none;
      --fig-handle-inner-outline: none;
      
      fig-color-tip{
        bottom: calc(100%);
      }
    }
    .fig-input-gradient-track {
      inset: 0 calc(var(--fig-input-gradient-padding) + 2px);
    }
    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
  }

  &[edit="false"] {
    pointer-events: none;
    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
  }

  &[edit="picker"] {
    --fig-input-gradient-swatch-border-radius: var(--radius-medium);

    & > fig-fill-picker {
      display: contents;
    }
  }
  & > fig-swatch,
  & > fig-fill-picker > fig-swatch {
    --width: 100%;
    width: var(--width);
    --border-radius: var(--fig-input-gradient-swatch-border-radius);
  }
  &[size="large"] {
    --fig-input-gradient-height: 2rem;
    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
    height: var(--fig-input-gradient-height) !important;
    
    .fig-input-gradient-track {
      inset: 0;
    }
    > fig-swatch{
      --size: var(--fig-input-gradient-height);
    }
  }

  .fig-input-gradient-track {
    position: absolute;
    display: flex;
    align-items: center;
    inset: 0 calc(var(--fig-input-gradient-padding) + var(--fig-input-gradient-handle-size)/2);
    pointer-events: auto;
    z-index: 1;

    fig-handle {
      pointer-events: auto;
      cursor: default;

      &:hover {
        z-index: 5;
      }
    }

    fig-handle.fig-input-gradient-ghost {
      z-index: 10;
    }
  }
}

fig-input-palette {
  --fig-input-palette-padding: var(--spacer-1);
  --fig-input-palette-height: 1.5rem;
  display: inline-grid !important;
  grid-template-columns: 1fr 24px;
  grid-template-areas:
    "inline    button";
  gap: var(--spacer-2);
  min-width: 0;

  > .palette-colors-inline {
    grid-area: inline;
  }

  .palette-colors {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    border-radius: var(--radius-medium);
    overflow: hidden;
    grid-area: inputs;
    min-width: 0;
    width: 100%;
  }

  .palette-add-btn {
    grid-area: button;
  }
  .palette-colors-inline {
    display: flex !important;
    border-radius: var(--radius-medium);
    width: 100%;
    gap: var(--spacer-2);
    place-items: center;
    height: var(--fig-input-palette-height);
    border-radius: var(--radius-medium);
    background-color: var(--figma-color-bg-secondary);
    padding: 0 var(--fig-input-palette-padding);

    .palette-colors {
      display: flex;
      border-radius: var(--radius-small);
      --palette-colors-height: calc(var(--fig-input-palette-height) - var(--fig-input-palette-padding)*2);
      height: var(--palette-colors-height);
      fig-input-color {
        width: 100%;
        &:focus,
        &:focus-within {
          outline: 0 !important;
        }
        fig-swatch {
          --border-radius: 0px;
          --width: 100%;
          --padding: 0px;
          --height: var(--palette-colors-height);
          --size: var(--palette-colors-height);
          flex: 1;
          min-width: 0;
          width: 100% !important;
          border-radius: 0 !important;
          input,
          &::before,
          &::after {
            padding: 0 !important;
            border-radius: 0 !important;
          }
          &::after{
            box-shadow: inset 1px 0 0 0 var(--figma-color-bordertranslucent);
          }
        }
        &:first-child{
          & fig-swatch::after{
            box-shadow: none;
          }
        }
      }
      
    }
  }
  &:focus-visible {
    outline: 0;
  }
  &:focus-visible > .palette-colors-inline,
  > .palette-colors-inline:focus-visible,
  &:has(> .palette-colors-inline :focus-visible) > .palette-colors-inline {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }
  &[open]:not([open="false"]):not([edit="false"]) {
    grid-template-areas:
    "inline    button"
    "expanded  expanded";
    .palette-colors-expanded {
      display: grid;
    }
  }
  &[fixed]:not([fixed="false"]) > .palette-colors-inline {
    grid-column: 1 / -1;
  }
  .palette-colors-expanded {
    display: none;
    grid-area: expanded;
    grid-template-columns: [input] 1fr [button] 1.5rem;
    overflow: visible;
    border-radius: 0;
    gap: var(--spacer-2);
    width: 100%;

    > fig-input-color {
      min-width: 0;
      grid-column: input / -1;

      &:has(+ fig-button),
      &:has(+ fig-tooltip) {
        grid-column: input;
      }
    }

    > fig-button,
    > fig-tooltip,
    > button {
      grid-column: button;
    }

    fig-swatch {
      --border-radius: var(--radius-medium);
      width: auto !important;
      height: var(--size);
      border-radius: var(--radius-medium) !important;
    }
  }
  fig-field &{
    grid-template-columns: 1fr calc(var(--spacer-3) + var(--spacer-1));
    .palette-colors-expanded {
      grid-template-columns: [input] 1fr [button] calc(var(--spacer-3) + var(--spacer-1));
    }
  }
}


fig-field {
  --fig-field-gap: var(--spacer-2);
  --fig-field-left-padding: var(--spacer-3);
  --fig-field-right-padding: var(--spacer-3);
  --fig-field-top-padding: var(--spacer-1);
  --fig-field-bottom-padding: var(--spacer-1);
  --fig-field-label-max-height: var(--spacer-5);
  --fig-field-label-ratio: 1fr;
  --fig-field-input-ratio: 2fr;
  display: grid;
  grid-template-columns:
    var(--fig-field-left-padding) minmax(0, var(--fig-field-label-ratio))
    minmax(0, var(--fig-field-input-ratio)) var(--fig-field-right-padding);
  grid-template-areas: "chevron label input pad";
  margin: 0;
  padding: var(--fig-field-top-padding) 0 var(--fig-field-bottom-padding) 0;
  gap: 0;
  align-items: start;

  &:not([direction="vertical"]):has(> label):has(
      > :not(label):not(.fig-field-chevron):not(
          fig-button[icon]:not([icon="false"])
        )
        + fig-button[icon]:not([icon="false"])
    ) {
    & > :not(label):not(.fig-field-chevron):not(
        fig-button[icon]:not([icon="false"])
      ):has(+ fig-button[icon]:not([icon="false"])) {
      justify-self: start;
      width: calc(100% - var(--spacer-4) - var(--spacer-1));
    }

    & > :not(label):not(.fig-field-chevron):not(
        fig-button[icon]:not([icon="false"])
      ):has(+ fig-button[icon]:not([icon="false"])[variant="ghost"]) {
      width: calc(100% - var(--spacer-4));
    }

    & > :not(label):not(.fig-field-chevron):not(
        fig-button[icon]:not([icon="false"])
      )
      + fig-button[icon]:not([icon="false"]) {
      grid-area: input;
      justify-self: end;
      z-index: 1;
    }

    & > :not(label):not(.fig-field-chevron):not(
        fig-button[icon]:not([icon="false"])
      )
      + fig-button[icon]:not([icon="false"])[variant="ghost"] {
      margin-right: calc(var(--spacer-1) * -1);
    }
  }


  &[columns="half"] {
    --fig-field-label-ratio: 2fr;
  }

  &[columns="2/5"] {
    --fig-field-label-ratio: 2fr;
    --fig-field-input-ratio: 3fr;
  }

  & > [full]:not([full="false"]) {
    flex: 1 1 auto;
  }

  &:not(:has(> label)) > [full]:not([full="false"]) {
    width: 100%;
    align-self: stretch;
  }

  & > label {
    grid-area: label;
    display: block;
    padding: var(--spacer-1) 0;
    line-height: 1rem;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: var(--fig-field-gap);
    min-width: 0;
  }

  &:not([direction="vertical"]) > label {
    align-self: start;
    align-content: center;
    box-sizing: border-box;
    height: min(100%, var(--fig-field-label-max-height));
    padding-block: 0;
  }

  & > *:not(.fig-field-chevron):not(label) {
    grid-area: input;
  }

  & > progress {
    align-self: center;
  }

  & > .fig-field-chevron {
    --icon: var(--icon-16-chevron);
    --size: 1rem;
    color: var(--figma-color-text-tertiary);
    transform: rotate(-90deg);
    transition: transform var(--transition-duration)
      var(--transition-timing-function);
    flex-shrink: 0;
    grid-area: chevron;
    margin-top: var(--spacer-1);
  }

  &:has(> [open]:not([open="false"])) > .fig-field-chevron {
    transform: rotate(0deg);
  }

  /* labelless fields can have a few inputs */
  &:not([direction="vertical"]):not(:has(> label)) {
    grid-template-columns:
      var(--fig-field-left-padding) minmax(0, var(--fig-field-label-ratio))
      var(--spacer-2)
      minmax(0, var(--fig-field-input-ratio)) var(--fig-field-right-padding);
    grid-template-areas: "chevron input1 gap input2 pad";

    & > *:first-child {
      grid-area: input1;
    }

    & > *:last-child {
      grid-area: input2;
    }

    & > *:only-child {
      grid-column: input1 / -2;
    }
  }

  &[direction="vertical"] {
    grid-template-columns: var(--fig-field-left-padding) 1fr var(
        --fig-field-right-padding
      );
    grid-template-rows: auto auto;
    grid-template-areas:
      "chevron label pad"
      ".       input pad";

    & > label {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      margin-right: 0;
      min-width: auto;
    }
  }
}

fig-spinner {
  width: var(--spacer-4);
  height: var(--spacer-4);
  display: inline-flex;
  background-color: var(--figma-color-icon-tertiary);
  mask-image: var(--icon-24-spinner);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;  
  animation: fig-spinner-spin 1s linear infinite;

  &[size="small"] {
    width: var(--spacer-3);
    height: var(--spacer-3);
    mask-image: var(--icon-16-spinner);
  }
}

fig-interpolation-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--figma-color-bordertranslucent);
  overflow: visible;

  &[size="large"] {
    width: 2rem;
    height: 2rem;

    .fig-interpolation-swatch-svg,
    .fig-interpolation-swatch-fill {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  .fig-interpolation-swatch-svg {
    display: block;
    width: 1rem;
    height: 1rem;
    overflow: visible;
  }

  .fig-interpolation-swatch-fill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: linear-gradient(90deg, #ff0000, #4f9eff);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/* Segmented control */
.segmented-control,
fig-segmented-control {
  contain: layout paint;
  display: inline-flex;
  user-select: none;
  background-color: var(--figma-color-bg-secondary);
  border: 0;
  border-radius: var(--radius-medium);
  height: 1.5rem;
  padding: 1px;
  gap: 0;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  --seg-indicator-x: 0px;
  --seg-indicator-w: 0px;
  --seg-indicator-opacity: 0;
  --seg-indicator-transition-duration: 0ms;

  &::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: var(--seg-indicator-w);
    height: calc(100% - 2px);
    transform: translateX(var(--seg-indicator-x));
    border-radius: calc(var(--radius-medium) - 1px);
    background-color: var(--figma-color-bg);
    box-shadow: 0 0 0 1px var(--figma-color-border);
    opacity: var(--seg-indicator-opacity);
    pointer-events: none;
    z-index: 0;
    transition:
      transform var(--seg-indicator-transition-duration) ease,
      width var(--seg-indicator-transition-duration) ease,
      opacity 0.12s ease;
  }

  & fig-segment {
    --figma-focus-outline-offset: 0;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    position: relative;
    z-index: 1;
    appearance: none;
    color: var(--figma-color-text-secondary);
    padding: 0 var(--spacer-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: none;
    text-transform: capitalize;

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

    &:focus-visible {
      outline: var(--figma-focus-outline);
      outline-offset: var(--figma-focus-outline-offset);
    }

    svg {
      *[fill] {
        fill: currentColor;
      }
      *[stroke]:not([stroke="none"]) {
        stroke: currentColor;
      }
    }
  }

  &:not([sizing]),
  &[sizing=""],
  &[sizing="equal"] {
    & fig-segment {
      flex: 1 1 0;
    }
  }

  &[sizing="auto"] {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;

    &[full]:not([full="false"]) {
      display: inline-flex;
      width: fit-content;
      flex: 0 0 auto;
      align-self: auto;
    }

    & fig-segment {
      flex: 0 0 auto;
    }
  }

  &[animated]:not([animated="false"]) {
    & fig-segment {
      &[selected]:not([selected="false"]),
      &[selected="true"] {
        background-color: transparent;
        box-shadow: none;
      }
    }
  }

  &[size="large"] {
    height: var(--spacer-5);

    & fig-segment {
      padding: 0 var(--spacer-3);
    }
  }

  &[disabled]:not([disabled="false"]) {
    pointer-events: none;
    --seg-indicator-opacity: 0;

    fig-segment {
      color: var(--figma-color-text-disabled);
      background-color: transparent;
      box-shadow: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .segmented-control::before,
  fig-segmented-control::before {
    transition: none !important;
  }
}

/* Options */
fig-options {
  display: flex;
  width: 100%;

  & > fig-segmented-control {
    flex: 1;
    min-width: 0;
  }

  & > fig-dropdown {
    flex: 1;
  }
}

fig-joystick {
  --size: 100%;
  --aspect-ratio: 1 / 1;
  --is-not-default: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacer-2);
  user-select: none;
  width: var(--size);

  /* When inside horizontal fig-field, grow to fill and let inputs expand */
  fig-field:not([direction="vertical"]) & {
    flex: 1;
    min-width: 0;

    fig-input-number {
      flex: 1;
      width: auto;
    }
  }

  .joystick-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacer-2);
  }

  .joystick-values > fig-input-number {
    width: 100%;
  }

  .fig-input-joystick-plane-container {
    display: flex;
    width: 100%;
    aspect-ratio: var(--aspect-ratio);
    place-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    &:focus {
      outline: 0;
    }
  }

  .fig-joystick-reset {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--figma-color-bg-secondary) !important;
    &:hover {
      fig-icon {
        background-color: var(--figma-color-text);
      }
    }

    fig-icon {
      background-color: var(--figma-color-text-tertiary);
    }
  }

  &:not([default]) .fig-joystick-reset {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .fig-joystick-axis-label {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    color: var(--figma-color-text-tertiary);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.01em;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow:
      1px 0 0 var(--figma-color-bg-secondary),
      -1px 0 0 var(--figma-color-bg-secondary),
      0 1px 0 var(--figma-color-bg-secondary),
      0 -1px 0 var(--figma-color-bg-secondary);

    &.top {
      top: var(--spacer-2);
      left: 50%;
      transform: translateX(-50%);
    }

    &.bottom {
      bottom: var(--spacer-2);
      left: 50%;
      transform: translateX(-50%);
    }

    &.left {
      left: calc(var(--spacer-2) + 0.5em);
      top: 50%;
      transform: translate(-50%, -50%) rotate(-90deg);
      transform-origin: center;

      &.no-rotate {
        left: var(--spacer-2);
        transform: translateY(-50%);
      }
    }

    &.right {
      right: calc(var(--spacer-2) + 0.5em);
      top: 50%;
      transform: translate(50%, -50%) rotate(90deg);
      transform-origin: center;
    }
  }

  .fig-input-joystick-plane {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }
  .fig-input-joystick-plane > * {
    grid-area: 1/1;
  }
  .fig-input-joystick-guides {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--figma-color-bg-secondary);

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

@keyframes fig-shimmer-text {
  from {
    background-position: var(--fig-shimmer-text-from, 100% 0%);
  }
  to {
    background-position: var(--fig-shimmer-text-to, 0% 0%);
  }
}
@keyframes fig-shimmer-mask {
  from {
    mask-position: var(--fig-skeleton-mask-from, var(--fig-shimmer-mask-from, 100% 0%));
  }
  to {
    mask-position: var(--fig-skeleton-mask-to, var(--fig-shimmer-mask-to, 0% 0%));
  }
}
/* Shimmer */
fig-shimmer {
  display: contents;
  color: var(--figma-color-text-secondary);
  --fig-shimmer-angle: 90deg;
  --fig-shimmer-bright-fill-color: var(--figma-color-bg-tertiary);
  --fig-shimmer-bright-text-color: var(--figma-color-text);
  --fig-shimmer-duration: 1.5s;
  --fig-shimmer-mask-from: 100% 0%;
  --fig-shimmer-mask-to: 0% 0%;
  --fig-shimmer-size: 250% 100%;
  --fig-shimmer-subtle-fill-color: var(--figma-color-bg-transparent);
  --fig-shimmer-subtle-text-color: var(--figma-color-text-tertiary);
  --fig-shimmer-text-from: 100% 0%;
  --fig-shimmer-text-to: 0% 0%;

  &[direction="vertical"] {
    --fig-shimmer-angle: 180deg;
    --fig-shimmer-size: 100% 250%;
    --fig-shimmer-mask-from: 0% 100%;
    --fig-shimmer-text-from: 0% 100%;
  }
  &[direction="diagonal"] {
    --fig-shimmer-angle: 135deg;
    --fig-shimmer-size: 250% 250%;
  }

  /* When not playing, remove shimmer effect entirely */
  &[playing="false"] * {
    background: none;
    background-size: unset;
    animation: none;
  }
  &[playing="false"] :where(*:not(:has(*)):not(:empty)) {
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
  }
  /* Only apply shimmer when playing (default) or playing="true" */
  &:not([playing="false"]) :where(*:has(*), *:empty) {
    mask: linear-gradient(
      var(--fig-shimmer-angle),
      var(--fig-shimmer-subtle-fill-color) 0%,
      var(--fig-shimmer-subtle-fill-color) 40%,
      var(--fig-shimmer-bright-fill-color) 50%,
      var(--fig-shimmer-subtle-fill-color) 60%,
      var(--fig-shimmer-subtle-fill-color) 100%
    );
    mask-size: var(--fig-shimmer-size);
    animation: fig-shimmer-mask var(--fig-shimmer-duration) linear infinite;
  }
  &:not([playing="false"]) :where(*:not(:has(*)):not(:empty)) {
    mask: none;
    background: linear-gradient(
      var(--fig-shimmer-angle),
      var(--fig-shimmer-subtle-text-color) 0%,
      var(--fig-shimmer-subtle-text-color) 40%,
      var(--fig-shimmer-bright-text-color) 50%,
      var(--fig-shimmer-subtle-text-color) 60%,
      var(--fig-shimmer-subtle-text-color) 100%
    );
    background-size: var(--fig-shimmer-size);
    animation: fig-shimmer-text var(--fig-shimmer-duration) linear infinite;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}
/* Skeleton */
fig-skeleton {
  display: contents;
  pointer-events: none;
  user-select: none;
  --fig-skeleton-angle: 90deg;
  --fig-skeleton-bg-color: var(--figma-color-bg-secondary);
  --fig-skeleton-bright-mask-color: rgba(0, 0, 0, 1);
  --fig-skeleton-duration: 1.5s;
  --fig-skeleton-mask-from: 100% 0%;
  --fig-skeleton-mask-to: 0% 0%;
  --fig-skeleton-size: 250% 100%;
  --fig-skeleton-subtle-mask-color: rgba(0, 0, 0, 0.75);

  &[direction="vertical"] {
    --fig-skeleton-angle: 180deg;
    --fig-skeleton-size: 100% 400%;
    --fig-skeleton-mask-from: 0% 100%;
  }
  &[direction="diagonal"] {
    --fig-skeleton-angle: 135deg;
    --fig-skeleton-size: 250% 250%;
  }

  &:not([playing="false"]) * {
    mask: linear-gradient(
      var(--fig-skeleton-angle),
      var(--fig-skeleton-subtle-mask-color) 0%,
      var(--fig-skeleton-subtle-mask-color) 40%,
      var(--fig-skeleton-bright-mask-color) 50%,
      var(--fig-skeleton-subtle-mask-color) 60%,
      var(--fig-skeleton-subtle-mask-color) 100%
    );
    mask-size: var(--fig-skeleton-size);
    animation: fig-shimmer-mask var(--fig-skeleton-duration) linear infinite;
    * {
      color: transparent;
    }
  }
  label,
  h3,
  h2,
  p,
  span {
    background: var(--fig-skeleton-bg-color);
    border-radius: var(--radius-medium);
  }
  img,video{
    opacity: 0
  }
  fig-field{
    & > label{
      padding-top:0;
      padding-bottom:0;
      border-radius: 0.5rem;
    }
  }

  *:not(fig-field, fig-header) {
    background: var(--fig-skeleton-bg-color) !important;
    box-shadow: none !important;
    border-radius: var(--radius-medium);
    color: var(--fig-skeleton-bg-color) !important;
    pointer-events: none;
    user-select: none;
  }
  *::placeholder {
    color: transparent !important;
  }
  *::after,
  *::before,
  *::marker,
  *::picker-icon,
  *::-webkit-slider-thumb,
  *::-webkit-slider-runnable-track,
  *::-webkit-color-swatch,
  *::-webkit-color-swatch-wrapper,
  *::-webkit-details-marker,
  *::-webkit-inner-spin-button,
  *::-webkit-outer-spin-button,
  *::-webkit-calendar-picker-indicator {
    display: none !important;
  }
}

/* Utilities */

.fig-mask-icon,
fig-icon {
  contain: strict;
  --size: var(--spacer-4);
  --icon: var(--icon-24-add);

  &[size="small"] {
    --size: var(--spacer-3);
  }

  display: inline-flex;
  width: var(--size);
  height: var(--size);
  background: currentColor;
  mask-image: var(--icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  flex-shrink: 0;
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  &:has(> svg) {
    background: transparent;
    mask-image: none;
    -webkit-mask-image: none;
  }

  & > svg {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    flex-shrink: 0;
  }
}

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

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

/* Chooser */
fig-chooser {
  --chooser-fade-size: var(--spacer-4);
  --fig-chooser-gap: var(--spacer-2);
  --fig-chooser-inline-padding: var(--spacer-2);
  --fig-chooser-block-padding: var(--spacer-2);
  --fig-chooser-inline-margin: var(--spacer-3);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--fig-chooser-gap);
  height: inherit;
  max-height: inherit;
  max-width: inherit;
  min-width: 0;
  overflow: hidden auto;
  padding: 0;
  margin: 0 var(--fig-chooser-inline-margin);
  scrollbar-width: none;
  width: calc(100% - var(--fig-chooser-inline-margin) * 2);

  fig-field > &{
    --fig-chooser-inline-margin:0;
  }

  > :not(.fig-overflow) {
    flex-shrink: 0;
    min-width: 0;
  }

  > .fig-overflow {
    flex: 0 0 var(--chooser-fade-size);
    height: var(--chooser-fade-size);
    margin-inline: 0;
    position: sticky;
    width: 100%;
    z-index: 3;
    margin: calc(var(--fig-chooser-gap) * -1);
  }

  > .fig-overflow-start {
    box-shadow: 0 1px 0 0 var(--figma-color-bordertranslucent);
    margin-block-end: calc(-1 * var(--chooser-fade-size));
    order: -1;
    top: 0;

    &:before {
      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    }

    .fig-overflow-chevron {
      rotate: 180deg;
    }
  }

  > .fig-overflow-end {
    bottom: 0;
    box-shadow: 0 -1px 0 0 var(--figma-color-bordertranslucent);
    margin-block-start: calc(-1 * var(--chooser-fade-size));
    order: 1;

    &:before {
      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    }
  }

  &[overflow="scrollbar"] {
    scrollbar-width: thin;
    scrollbar-color: var(--figma-color-border) transparent;
  }

  &[layout="horizontal"] {
    flex-direction: row;
    overflow: auto hidden;


    > :not(.fig-overflow) {
      flex: 0 0 auto;
    }

    > .fig-overflow {
      align-self: stretch;
      flex: 0 0 var(--chooser-fade-size);
      height: auto;
      width: var(--chooser-fade-size);
      margin-top: 0;
      margin-bottom: 0;
    }

    > .fig-overflow-start {
      box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
      inset-inline-start: 0;
      left: 0;
      margin-block-end: 0;
      margin-inline-end: calc(-1 * var(--chooser-fade-size));
      right: auto;
      top: 0;

      &:before {
        border-radius: var(--radius-medium) 0 0 var(--radius-medium);
      }

      .fig-overflow-chevron {
        rotate: 90deg;
      }
    }

    > .fig-overflow-end {
      bottom: auto;
      box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
      inset-inline-end: 0;
      left: auto;
      margin-block-start: 0;
      margin-inline-start: calc(-1 * var(--chooser-fade-size));
      right: 0;
      top: 0;

      &:before {
        border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
      }

      .fig-overflow-chevron {
        rotate: -90deg;
      }
    }
  }
  &[layout="vertical"], 
  &[layout="grid"]{
   &>.fig-overflow{
    margin-left:0;
    margin-right:0;
   }
  }

  &[layout="grid"] {
    display: grid;
    gap: var(--fig-chooser-gap);
    grid-template-columns: repeat(
      var(--fig-chooser-grid-columns, 2),
      minmax(0, 1fr)
    );
    overflow: auto;
    scroll-snap-type: none;

    > :not(.fig-overflow) {
      margin: 0;
    }

    > :not(.fig-overflow) + :not(.fig-overflow) {
      margin: 0;
    }

    > .fig-overflow-start + :not(.fig-overflow),
    > :not(.fig-overflow):has(+ .fig-overflow-end) {
      margin: 0;
    }

    > .fig-overflow {
      grid-column: 1 / -1;
      margin-inline: 0;
    }

    > .fig-overflow-start {
      order: -1;
    }

    > :not(.fig-overflow) {
      order: 0;
    }

    > .fig-overflow-end {
      order: 1;
    }
  }

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

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

fig-card {
  --fig-card-label-line-clamp: 1;
  --fig-card-media-radius: var(--radius-medium);
  --fig-card-padding: var(--spacer-1);
  display: flex;
  flex-direction: column;
  gap: var(--spacer-1);
  width: 100%;
  min-width: 0;

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

  &[size="large"] {
    --fig-card-padding: var(--spacer-2);

    > fig-footer,
    .fig-card-link > fig-footer {
      margin-top: var(--spacer-1);
    }

    .fig-card-label,
    .fig-card-sublabel {
      padding-inline: 0;
    }
  }

  &:is(:not([src]), [src=""]) {
    padding: var(--fig-card-padding);
    border-radius: 0.5625rem;
    box-sizing: border-box;
  }

  .fig-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-1);
    padding: var(--fig-card-padding);
    border-radius: 0.5625rem;
    text-decoration: none;
    color: inherit;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  .fig-card-link:focus-visible {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  .fig-card-link > fig-image,
  .fig-card-link > fig-media,
  .fig-card-link > fig-preview,
  &:is(:not([src]), [src=""]) > fig-image,
  &:is(:not([src]), [src=""]) > fig-media,
  &:is(:not([src]), [src=""]) > fig-preview {
    display: block;
    width: 100%;
    max-width: none;
    gap: 0;
    border-radius: var(--fig-card-media-radius);
  }

  .fig-card-link > fig-image > fig-preview,
  .fig-card-link > fig-media > fig-preview,
  .fig-card-link > fig-preview,
  &:is(:not([src]), [src=""]) > fig-image > fig-preview,
  &:is(:not([src]), [src=""]) > fig-media > fig-preview,
  &:is(:not([src]), [src=""]) > fig-preview {
    width: 100%;
    max-width: none;
    border-radius: var(--fig-card-media-radius);
    min-height: auto;
  }

  > fig-footer,
  .fig-card-link > fig-footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    padding: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
  }

  > fig-footer[hidden],
  .fig-card-link > fig-footer[hidden] {
    display: none;
  }

  .fig-card-label {
    font-size: var(--font-size-small);
    line-height: var(--line-height);
    color: var(--figma-color-text);
    min-width: 0;
    min-height: 0;
    padding-inline: var(--spacer-1);
    justify-content: flex-start;
    text-align: start;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--fig-card-label-line-clamp);
    overflow: hidden;
    word-break: break-word;
  }

  .fig-card-label[hidden] {
    display: none;
  }

  .fig-card-sublabel {
    font-size: var(--font-size-small);
    line-height: var(--line-height);
    color: var(--figma-color-text-secondary);
    padding-inline: var(--spacer-1);
    min-width: 0;
    min-height: 0;
    justify-content: flex-start;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fig-card-sublabel[hidden] {
    display: none;
  }

  &:hover:not([selected]:not([selected="false"])):not(
      [disabled]:not([disabled="false"])
    ):not([aria-disabled="true"])
    .fig-card-link,
  &:is(:not([src]), [src=""]):hover:not(
      [selected]:not([selected="false"])
    ):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {
    background: var(--figma-color-bg-secondary);
  }

  &[selected]:not([selected="false"]) .fig-card-link,
  &:is(:not([src]), [src=""])[selected]:not([selected="false"]) {
    background: var(--figma-color-bg-selected);
  }

  &[selected]:not([selected="false"])
    .fig-card-link
    > :is(fig-image, fig-media, fig-preview),
  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
    > :is(fig-image, fig-media, fig-preview) {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  &[selected]:not([selected="false"])
    .fig-card-link
    > :is(fig-image, fig-media)
    > fig-preview::after,
  &[selected]:not([selected="false"])
    .fig-card-link
    > fig-preview::after,
  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
    > :is(fig-image, fig-media)
    > fig-preview::after,
  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
    > fig-preview::after {
    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
  }

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

fig-choice {
  --fig-choice-selection-ring-width: 1px;
  --fig-choice-padding: 0px;
  --fig-choice-text-padding-inline: var(--spacer-2);
  --fig-choice-border-radius: var(--radius-medium);
  --fig-choice-min-height: 1.5rem;
  --fig-choice-min-width: 1.5rem;

  min-height: var(--fig-choice-min-height);
  min-width: var(--fig-choice-min-width);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: var(--fig-choice-border-radius);
  gap: var(--spacer-2);
  outline: none;
  cursor: default;
  padding: var(--fig-choice-padding);

  &:not(:has(> *)) {
    padding-inline: var(--fig-choice-text-padding-inline);
  }


  &:hover:not([selected]:not([selected="false"])):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {
    background-color: var(--figma-color-bg-secondary);
  }

  &:focus-visible {
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  &[padding]:not([padding="false"]) {
    --fig-choice-padding: var(--spacer-2);
  }

  &[selected]:not([selected="false"]) {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--fig-choice-border-radius);
      pointer-events: none;
      z-index: 1;
      box-shadow: inset 0 0 0 calc(var(--fig-choice-selection-ring-width)*2) var(--figma-color-bg);
      outline: var(--fig-choice-selection-ring-width) solid
        var(--figma-color-border-selected);
      outline-offset: calc(var(--fig-choice-selection-ring-width) * -1);
    }
    background-color: var(--figma-color-bg-secondary);
  }

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

fig-handle {
  --width: 1rem;
  --height: 1rem;
  --fill: transparent;
  --border-radius: 50%;
  --fig-handle-bg: var(--handle-color);
  --fig-handle-checkerboard: var(--checkerboard-handle);
  --fig-handle-height: var(--width);
  --fig-handle-hit-area-opacity: 0;
  --fig-handle-hit-area-size: 0;
  --fig-handle-inner-bg: var(--figma-color-bg-brand);
  --fig-handle-inner-outline: 1px solid var(--figma-color-bg-brand);
  --fig-handle-inner-shadow: none;
  --fig-handle-inner-radius: 50%;
  --fig-handle-outline: 1.5px solid var(--fig-handle-outline-color);
  --fig-handle-inner-outline-offset: 0px;
  --fig-handle-outline-color: transparent;
  --fig-handle-outline-offset: 0px;
  --fig-handle-padding: 0.25rem;
  --fig-handle-shadow: none;
  --fig-handle-width: var(--width);

  margin: 0;
  padding: var(--fig-handle-padding);
  place-items: center;
  width: var(--fig-handle-width);
  height: var(--fig-handle-height);
  border-radius: var(--border-radius);
  display: grid;
  background: var(--fig-handle-bg);
  outline: var(--fig-handle-outline);
  outline-offset: var(--fig-handle-outline-offset);
  box-shadow: var(--fig-handle-shadow);

  /* Used for active state/color handles */
  &::after {
    content: "";
    color-scheme: light only;
    width: 100%;
    height: 100%;
    background: var(--fig-handle-inner-bg);
    border-radius: var(--fig-handle-inner-radius);
    box-shadow: var(--fig-handle-inner-shadow);
    outline: var(--fig-handle-inner-outline);
    outline-offset: var(--fig-handle-inner-outline-offset);
    place-self: center;
    grid-area: 1 / 1;
    z-index: 2;
  }

  &[size="small"] {
    --width: 0.75rem;
    --height: 0.75rem;
    --fig-handle-padding: 3px;
  }

  &[drag]:not([drag="false"]) {
    position: absolute;
    translate: var(--fig-handle-position-translate, none);
    transform-origin: center;
    touch-action: none;
  }
  &:hover,
  &[selected]:not([selected="false"]) {
    --fig-handle-outline-color: var(--figma-color-border-selected);
    --fig-handle-outline: 1px solid var(--fig-handle-outline-color);
    --fig-handle-shadow: var(--figma-elevation-200-canvas);
  }

  &:focus-visible {
    --figma-focus-outline-offset: 1px;
    outline: var(--figma-focus-outline);
    outline-offset: var(--figma-focus-outline-offset);
  }

  /* Default handle (no type) hover/selected */
  &:hover:not([type]),
  &[selected]:not([selected="false"]):not([type]) {
   --fig-handle-inner-bg:  var(--figma-color-bg-brand);
   --fig-handle-outline-color: var(--figma-color-border-selected);
   --fig-handle-outline: 1px solid var(--fig-handle-outline-color);
  }

  &[type="canvas"]{
    --width: 0.75rem;
    --height: 0.75rem;
    --fig-handle-inner-bg: transparent;
    --fig-handle-outline-color: transparent;
    --fig-handle-shadow: none;
    --fig-handle-inner-outline: 1px solid var(--figma-color-border-selected);
    --fig-handle-padding: 1px;
    --fig-handle-inner-outline-offset: -1px;
    &:hover,
    &[selected]:not([selected="false"]){
      --width: 1rem;
      --height: 1rem;
      --fig-handle-outline-color: transparent;
      --fig-handle-inner-outline: 2px solid var(--figma-color-border-selected);
      --fig-handle-inner-outline-offset: -2px;
      --fig-handle-shadow: var(--figma-elevation-200-canvas);
    }
    &.dragging,
    &:active{
      --fig-handle-padding: 2px !important;
      --fig-handle-inner-bg: var(--figma-color-bg-brand);
    }
    &[selected]:not([selected="false"]){
      --fig-handle-padding: 2px;
      --fig-handle-inner-bg: var(--figma-color-bg-brand);
    }
  }
  &[type="color"],
  &[tip="color"],
  &[tip="add"],
  &[tip="remove"] {
    --fig-handle-inner-bg: linear-gradient(var(--fill), var(--fill)), var(--fig-handle-checkerboard);
    --fig-handle-padding: 0.25rem;
    --fig-handle-inner-outline: none;
    position: relative;
    overflow: visible;

    fig-color-tip {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
  }
  &[disabled]:not([disabled="false"]),
  &[aria-disabled="true"] {
    --fig-handle-outline-color: transparent;
    --fig-handle-shadow: none;
    cursor: not-allowed;
    background-color: var(--figma-color-bg-disabled);
    &::after{
      --fig-handle-inner-bg: var(--figma-color-icon-disabled);
    }
  }

  .fig-handle-hit-area {
    position: absolute;
    inset: calc(var(--fig-handle-hit-area-size) * -0.5px);
    pointer-events: auto;
    background: red;
    opacity: var(--fig-handle-hit-area-opacity, 0);
    z-index: 0;
  }
}

fig-color-tip {
  --size: 1.5rem;
  --tip-selection-width: 1px;
  --tip-selection-scale: 1;
  --beak-offset: 50%;

  contain: layout;
  inset: unset;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  position: relative;
  color: var(--figma-color-text);
  color-scheme: light only;
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background-color: var(--figma-color-bg);
  border-radius: var(--radius-medium, 0.3125rem);
  box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
  filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
    drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));

  &[control="add"],
  &[control="remove"] {
    cursor: pointer;
  }

  fig-swatch {
    input[type="color"] {
      background: transparent;
    }
  }

  &[selected]:not([selected="false"]):before {
    content: "";
    background: var(--figma-color-border-selected);
    clip-path: var(--tip-pointer);
    width: 1rem;
    height: 6px;
    position: absolute;
    top: 100%;
    left: var(--beak-offset, 50%);
    z-index: 1;
    pointer-events: none;
    transform: translate(-50%, 0) scale(var(--tip-selection-scale));
    transform-origin: 50% 0;
  }

  &:after {
    content: "";
    background-color: inherit;
    clip-path: var(--tip-pointer);
    width: 1rem;
    height: 6px;
    position: absolute;
    top: calc(100% - 1px);
    left: var(--beak-offset, 50%);
    z-index: 3;
    transform: translate(-50%);
  }

  
}

/* Menu */
fig-menu {
  display: contents;

  & > fig-menu-item,
  & > fig-separator {
    display: none;
  }
}

/* Select — host chrome; trigger/listbox live in shadow (options slotted) */
fig-select {
  display: inline-flex;
  position: relative;
  align-items: center;
  min-width: 0;
  height: var(--spacer-4);
  border-radius: var(--radius-medium);
  background-color: var(--figma-color-bg);
  color: var(--figma-color-text);
  box-shadow: inset 0 0 0 1px var(--figma-color-border);

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

  &[disabled]:not([disabled="false"]) {
    pointer-events: none;
    color: var(--figma-color-text-tertiary);

    &::after {
      background-color: var(--figma-color-icon-disabled);
    }
  }

  &::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;
    z-index: 1;
  }
}

/*
 * Internal listbox is a fig-popup inside fig-select's shadow, so document
 * dialog[is="fig-popup"] rules don't apply. Expose part=listbox and mirror
 * the menu-theme popup chrome (same tokens as components.css).
 */
fig-select::part(listbox) {
  --z-index: 999999;
  --fig-popup-radius: var(--radius-large);
  --fig-popup-bg-color: var(--figma-color-bg-menu);

  z-index: var(--z-index);
  position: fixed;
  /* Do not set inset here — ::part inset beats inline left/top and
     prevents edge clamping from moving the menu back into view. */
  margin: 0;
  border: 0;
  outline: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--fig-popup-radius);
  background-color: var(--fig-popup-bg-color);
  color: var(--figma-color-text-menu);
  color-scheme: dark;
  box-shadow: var(--figma-elevation-400-menu-panel);
  /* width/min/max set in JS — ::part width rules override element.style. */
  max-height: calc(100vh - 1rem);
  height: max-content;
}

/* Vertical option panels own their scroller and shared top/bottom paging buttons. */
fig-select-options,
.fig-menu-options {
  --fig-vertical-overflow-size: var(--spacer-4);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 1rem);
  /* No block padding — sticky overflow buttons must sit flush to the popup edges. */
  padding: 0;
  overflow: hidden auto;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  & > :not(.fig-overflow) {
    flex-shrink: 0;
  }

  /* List breathing room (not on the scroller itself). */
  & > :not(.fig-overflow):first-child,
  & > .fig-overflow-start + :not(.fig-overflow) {
    margin-top: var(--spacer-2);
  }

  & > :not(.fig-overflow):last-child,
  & > :not(.fig-overflow):has(+ .fig-overflow-end) {
    margin-bottom: var(--spacer-2);
  }

  & > .fig-overflow {
    position: sticky;
    left: 0;
    flex: 0 0 var(--fig-vertical-overflow-size);
    width: 100%;
    height: var(--fig-vertical-overflow-size);
    margin: 0;
    z-index: 3;
    /* Menu chrome — not option hover (bg-menu-hover is brand blue). */
    color: var(--figma-color-text-menu);
    background: var(--figma-color-bg-menu) !important;

    &::before {
      inset: 0;
      border-radius: 0;
      background: var(--figma-color-bg-menu) !important;
    }

    &:hover::before {
      background: light-dark(
          rgba(0, 0, 0, 0.06),
          rgba(255, 255, 255, 0.08)
        )
        !important;
    }

    &:hover {
      color: var(--figma-color-text-menu);
    }
  }

  & > .fig-overflow-start {
    order: -1;
    top: 0;
    margin-block-end: calc(-1 * var(--fig-vertical-overflow-size));

    &::before {
      border-radius: var(--radius-large) var(--radius-large) 0 0;
    }

    .fig-overflow-chevron {
      rotate: 180deg;
    }
  }

  & > .fig-overflow-end {
    order: 1;
    bottom: 0;
    margin-block-start: calc(-1 * var(--fig-vertical-overflow-size));

    &::before {
      border-radius: 0 0 var(--radius-large) var(--radius-large);
    }
  }

}

fig-select-options > fig-separator {
  /* Align labels with select option text after the checkmark column. */
  &[label]:not([label=""]) {
    --fig-menu-inline-padding: 0 var(--spacer-2) 0 var(--spacer-5);

    &::before {
      margin-inline: unset;
      margin-left: calc(-1 * var(--spacer-5));
      margin-right: calc(-1 * var(--spacer-2));
    }
  }
}

fig-select-option {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  min-height: var(--spacer-4);
  height: auto;
  padding: var(--spacer-1) var(--spacer-2);
  padding-right: var(--spacer-3);
  border-radius: var(--radius-medium);
  color: var(--figma-color-text-menu);
  cursor: default;
  user-select: none;
  white-space: nowrap;

  &::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    z-index: -1;
    background-color: transparent;
  }

  &::after {
    content: "";
    display: block;
    flex: 0 0 1rem;
    order: -1;
    width: 1rem;
    height: 1rem;
    margin-left: var(--spacer-1);
    margin-right: var(--spacer-1);
    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;
    visibility: hidden;
  }

  & > [slot="prepend"] {
    margin-top: calc(var(--spacer-1) * -1);
    margin-bottom: calc(var(--spacer-1) * -1);
    margin-right: var(--spacer-1);
  }


  & > :not([slot="prepend"]):not([slot="append"]) {
    flex: 1 1 auto;
    min-width: 0;
  }

  & > [slot="append"] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--figma-color-text-tertiary);
  }

  &:hover,
  &:focus-visible {
    outline: none;

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

  &[selected]:not([selected="false"])::after,
  &[aria-selected="true"]::after {
    visibility: visible;
  }

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

fig-menu-item {
  --fig-menu-item-padding: var(--spacer-4);
  display: flex;
  align-items: center;
  gap: var(--spacer-2);
  padding: 0 var(--fig-menu-item-padding);
  height: var(--spacer-4);
  cursor: default;
  border-radius: var(--radius-medium);
  color: var(--figma-color-text-menu);
  font-weight: var(--body-medium-fontWeight);
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    z-index: -1;
    background-color: transparent;
  }

  &:hover,
  &:focus-visible {
    outline: none;
    &::before {
      background-color: var(--figma-color-bg-menu-hover);
    }
  }

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

fig-separator {
  --fig-separator-color: var(--figma-color-border);
  --fig-separator-label-color: var(--figma-color-text-secondary);
  --fig-menu-inline-padding: 0 var(--spacer-3);

  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  margin: var(--spacer-2) 0;
  padding: 0;
  border: 0;
  background: var(--fig-separator-color);
  color: var(--fig-separator-label-color);
  font-weight: var(--body-medium-fontWeight);
  pointer-events: none;
  user-select: none;

  &[borderless]:not([borderless="false"]) {
    background: transparent;

    &[label]:not([label=""])::before {
      display: none;
    }
  }

  /* Labeled: rule, then secondary group label (same pattern as menu optgroups). */
  &[label]:not([label=""]) {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-2);
    height: auto;
    margin: var(--spacer-2) 0;
    margin-bottom: var(--spacer-1);
    padding: var(--fig-menu-inline-padding);
    background: transparent;

    &::before {
      content: "";
      display: block;
      height: 1px;
      margin-inline: calc(-1 * var(--spacer-3));
      background: var(--fig-separator-color);
    }

    &::after {
      content: attr(label);
      display: block;
      color: var(--fig-separator-label-color);
      line-height: var(--spacer-4);
      min-height: var(--spacer-4);
    }
  }
}

dialog[is="fig-popup"][theme="menu"]
  fig-separator:first-child[label]:not([label=""])::before,
fig-select-options > fig-separator:first-child[label]:not([label=""])::before {
  display: none;
}

dialog[is="fig-popup"][theme="menu"] fig-separator,
fig-select-options > fig-separator {
  --fig-separator-color: var(--figma-color-border-menu);
  --fig-separator-label-color: var(--figma-color-text-menu-secondary);
}

dialog[is="fig-popup"][theme="menu"] fig-separator {
  --fig-menu-inline-padding: 0
    var(--fig-menu-item-padding, var(--spacer-4));

  &[label]:not([label=""])::before {
    margin-inline: calc(
      -1 * var(--fig-menu-item-padding, var(--spacer-4))
    );
  }
}