@unoff/ui 1.21.3 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/assets/Accordion.css +1 -1
  2. package/dist/assets/ActionsItem.css +1 -1
  3. package/dist/assets/ActionsList.css +1 -1
  4. package/dist/assets/Bar.css +1 -1
  5. package/dist/assets/Button.css +1 -1
  6. package/dist/assets/Card.css +1 -1
  7. package/dist/assets/Chip.css +1 -1
  8. package/dist/assets/ColorChip.css +1 -1
  9. package/dist/assets/Consent.css +1 -1
  10. package/dist/assets/Dialog.css +1 -1
  11. package/dist/assets/DraggableItem.css +1 -1
  12. package/dist/assets/DraggableWindow.css +1 -1
  13. package/dist/assets/Drawer.css +1 -1
  14. package/dist/assets/Dropdown.css +1 -1
  15. package/dist/assets/Dropzone.css +1 -1
  16. package/dist/assets/FormItem.css +1 -1
  17. package/dist/assets/Icon.css +1 -1
  18. package/dist/assets/Input.css +1 -1
  19. package/dist/assets/InputsBar.css +1 -1
  20. package/dist/assets/KeyboardShortcutItem.css +1 -1
  21. package/dist/assets/Knob.css +1 -1
  22. package/dist/assets/Layout.css +1 -1
  23. package/dist/assets/List.css +1 -1
  24. package/dist/assets/MembersList.css +1 -1
  25. package/dist/assets/Message.css +1 -1
  26. package/dist/assets/MultipleSlider.css +1 -1
  27. package/dist/assets/Popin.css +1 -1
  28. package/dist/assets/Section.css +1 -1
  29. package/dist/assets/SectionTitle.css +1 -1
  30. package/dist/assets/Select.css +1 -1
  31. package/dist/assets/SemanticMessage.css +1 -1
  32. package/dist/assets/SimpleItem.css +1 -1
  33. package/dist/assets/SimpleSlider.css +1 -1
  34. package/dist/assets/SortableList.css +1 -1
  35. package/dist/assets/Tabs.css +1 -1
  36. package/dist/assets/Thumbnail.css +1 -1
  37. package/dist/assets/Tooltip.css +1 -1
  38. package/dist/assets/styles/texts/styles/figma.css +1 -1
  39. package/dist/assets/styles/texts/styles/framer.css +1 -1
  40. package/dist/assets/styles/texts/styles/penpot.css +1 -1
  41. package/dist/assets/styles/texts/styles/sketch.css +1 -1
  42. package/dist/assets/styles/texts/texts.css +1 -1
  43. package/dist/assets/styles/tokens/modules/commons.css +1 -0
  44. package/dist/assets/styles/tokens/modules/figma-colors.css +1 -1
  45. package/dist/assets/styles/tokens/modules/figma-plugin.css +1 -0
  46. package/dist/assets/styles/tokens/modules/framer-colors.css +1 -1
  47. package/dist/assets/styles/tokens/modules/penpot-colors.css +1 -1
  48. package/dist/assets/styles/tokens/modules/sketch-colors.css +1 -1
  49. package/dist/components/actions/button/Button.figma.js +1 -1
  50. package/dist/components/assets/icon/Icon.figma.js +1 -1
  51. package/dist/components/dialogs/consent/Consent.d.ts.map +1 -1
  52. package/dist/components/dialogs/consent/Consent.js.map +1 -1
  53. package/dist/components/inputs/dropdown/Dropdown.d.ts.map +1 -1
  54. package/dist/components/inputs/dropdown/Dropdown.figma.js +1 -1
  55. package/dist/components/inputs/dropdown/Dropdown.js.map +1 -1
  56. package/dist/components/inputs/dropzone/Dropzone.d.ts +1 -1
  57. package/dist/components/inputs/dropzone/Dropzone.d.ts.map +1 -1
  58. package/dist/components/inputs/dropzone/Dropzone.js.map +1 -1
  59. package/dist/components/inputs/input/Input.figma.js +1 -1
  60. package/dist/components/lists/actions-list/ActionsList.d.ts.map +1 -1
  61. package/dist/components/lists/actions-list/ActionsList.js.map +1 -1
  62. package/dist/components/lists/sortable-list/SortableList.d.ts.map +1 -1
  63. package/dist/components/lists/sortable-list/SortableList.js.map +1 -1
  64. package/dist/components/lists/tabs/Tabs.figma.js +1 -1
  65. package/dist/components/tags/chip/Chip.figma.js +1 -1
  66. package/dist/components/tags/color-chip/ColorChip.d.ts.map +1 -1
  67. package/dist/components/tags/color-chip/ColorChip.js.map +1 -1
  68. package/dist/components/tags/icon-chip/IconChip.d.ts.map +1 -1
  69. package/dist/components/tags/icon-chip/IconChip.js.map +1 -1
  70. package/dist/index.d.ts +3 -2
  71. package/dist/index.d.ts.map +1 -1
  72. package/dist/index.js +108 -106
  73. package/dist/index.js.map +1 -1
  74. package/dist/index_react-D2vn0nVd.js +19160 -0
  75. package/dist/index_react-D2vn0nVd.js.map +1 -0
  76. package/dist/styles/texts/texts.module.js +13 -13
  77. package/dist/styles/tokens/modules/commons.module.js +9 -0
  78. package/dist/styles/tokens/modules/commons.module.js.map +1 -0
  79. package/dist/styles/tokens/modules/figma-plugin.module.js +9 -0
  80. package/dist/styles/tokens/modules/figma-plugin.module.js.map +1 -0
  81. package/dist/types/icon.types.d.ts +1 -1
  82. package/dist/types/icon.types.d.ts.map +1 -1
  83. package/dist/types/icon.types.js.map +1 -1
  84. package/package.json +2 -5
  85. package/dist/assets/styles/tokens/modules/globals.css +0 -1
  86. package/dist/index_react-BkjUklDQ.js +0 -18392
  87. package/dist/index_react-BkjUklDQ.js.map +0 -1
  88. package/dist/styles/tokens/modules/globals.module.js +0 -9
  89. package/dist/styles/tokens/modules/globals.module.js.map +0 -1
package/dist/assets/Button.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:root[data-theme=penpot]{--button-alternative-background-color-default: var(--penpot-color-accent-primary-muted);--button-alternative-background-color-disabled: var(--penpot-color-background-quaternary);--button-alternative-background-color-focus: var(--penpot-color-background-tertiary);--button-alternative-background-color-hover: var(--penpot-color-accent-tertiary);--button-alternative-background-color-pressed: var(--penpot-color-background-secondary);--button-alternative-border-color-default: transparent;--button-alternative-border-color-disabled: transparent;--button-alternative-border-color-focus: var(--penpot-color-accent-tertiary);--button-alternative-border-color-hover: transparent;--button-alternative-border-color-pressed: transparent;--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--penpot-color-accent-primary);--button-alternative-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-alternative-icon-color-focus: var(--penpot-color-accent-tertiary);--button-alternative-icon-color-hover: var(--penpot-color-foreground-primary);--button-alternative-icon-color-pressed: var(--penpot-color-accent-tertiary);--button-alternative-text-color-default: var(--penpot-color-accent-primary);--button-alternative-text-color-disabled: var(--penpot-color-foreground-disabled);--button-alternative-text-color-focus: var(--penpot-color-accent-tertiary);--button-alternative-text-color-hover: var(--penpot-color-foreground-primary);--button-alternative-text-color-pressed: var(--penpot-color-accent-tertiary);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: none;--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: transparent;--button-base-border-color: transparent;--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-medium);--button-base-icon-color: var(--penpot-color-background-secondary);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xxsmall);--button-base-padding-right: var(--size-pos-xxsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-xlarge);--button-base-text-color: var(--penpot-color-background-secondary);--button-base-text-decoration: none;--button-base-text-font-family: var(--font-stack);--button-base-text-font-size: var(--font-size-small);--button-base-text-font-weight: var(--font-weight-medium);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-small);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: uppercase;--button-destructive-background-color-default: var(--penpot-color-accent-error);--button-destructive-background-color-disabled: var(--penpot-color-background-error);--button-destructive-background-color-focus: var(--penpot-color-background-tertiary);--button-destructive-background-color-hover: var(--penpot-color-foreground-error);--button-destructive-background-color-pressed: var(--penpot-color-background-secondary);--button-destructive-border-color-default: transparent;--button-destructive-border-color-disabled: transparent;--button-destructive-border-color-focus: var(--penpot-color-accent-error);--button-destructive-border-color-hover: transparent;--button-destructive-border-color-pressed: transparent;--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--penpot-color-foreground-primary);--button-destructive-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-destructive-icon-color-focus: var(--penpot-color-foreground-secondary);--button-destructive-icon-color-hover: var(--penpot-color-foreground-primary);--button-destructive-icon-color-pressed: var(--penpot-color-accent-error);--button-destructive-text-color-default: var(--penpot-color-foreground-primary);--button-destructive-text-color-disabled: var(--penpot-color-foreground-disabled);--button-destructive-text-color-focus: var(--penpot-color-foreground-secondary);--button-destructive-text-color-hover: var(--penpot-color-foreground-primary);--button-destructive-text-color-pressed: var(--penpot-color-accent-error);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: none;--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-medium);--button-large-padding-right: var(--size-pos-medium);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--penpot-color-accent-primary);--button-primary-background-color-disabled: var(--penpot-color-background-quaternary);--button-primary-background-color-focus: var(--penpot-color-background-tertiary);--button-primary-background-color-hover: var(--penpot-color-accent-tertiary);--button-primary-background-color-pressed: var(--penpot-color-background-secondary);--button-primary-border-color-default: transparent;--button-primary-border-color-disabled: none;--button-primary-border-color-focus: var(--penpot-color-accent-primary);--button-primary-border-color-hover: transparent;--button-primary-border-color-pressed: transparent;--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--penpot-color-background-secondary);--button-primary-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-primary-icon-color-focus: var(--penpot-color-foreground-secondary);--button-primary-icon-color-hover: var(--penpot-color-background-secondary);--button-primary-icon-color-pressed: var(--penpot-color-accent-primary);--button-primary-text-color-default: var(--penpot-color-background-secondary);--button-primary-text-color-disabled: var(--penpot-color-foreground-disabled);--button-primary-text-color-focus: var(--penpot-color-foreground-secondary);--button-primary-text-color-hover: var(--penpot-color-background-secondary);--button-primary-text-color-pressed: var(--penpot-color-accent-primary);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: none;--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--penpot-color-background-tertiary);--button-secondary-background-color-disabled: var(--penpot-color-background-quaternary);--button-secondary-background-color-focus: var(--penpot-color-background-tertiary);--button-secondary-background-color-hover: var(--penpot-color-background-quaternary);--button-secondary-background-color-pressed: var(--penpot-color-background-secondary);--button-secondary-border-color-default: color(srgb 0 0 0 / 0);--button-secondary-border-color-disabled: color(srgb 0 0 0 / 0);--button-secondary-border-color-focus: var(--penpot-color-accent-primary);--button-secondary-border-color-hover: color(srgb 0 0 0 / 0);--button-secondary-border-color-pressed: var(--penpot-color-background-quaternary);--button-secondary-border-offset-default: var(--size-null);--button-secondary-border-offset-disabled: var(--size-null);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-null);--button-secondary-border-offset-pressed: var(--size-neg-unit);--button-secondary-border-width-default: var(--size-null);--button-secondary-border-width-disabled: var(--size-null);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-null);--button-secondary-border-width-pressed: var(--size-pos-unit);--button-secondary-icon-color-default: var(--penpot-color-foreground-primary);--button-secondary-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-secondary-icon-color-focus: var(--penpot-color-foreground-secondary);--button-secondary-icon-color-hover: var(--penpot-color-accent-primary);--button-secondary-icon-color-pressed: var(--penpot-color-accent-primary);--button-secondary-text-color-default: var(--penpot-color-foreground-primary);--button-secondary-text-color-disabled: var(--penpot-color-foreground-disabled);--button-secondary-text-color-focus: var(--penpot-color-foreground-secondary);--button-secondary-text-color-hover: var(--penpot-color-accent-primary);--button-secondary-text-color-pressed: var(--penpot-color-accent-primary);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: none;--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-small);--button-tertiary-background-color-default: var(--penpot-color-background-primary);--button-tertiary-background-color-disabled: var(--penpot-color-background-primary);--button-tertiary-background-color-focus: var(--penpot-color-background-primary);--button-tertiary-background-color-hover: var(--penpot-color-background-primary);--button-tertiary-background-color-pressed: var(--penpot-color-background-primary);--button-tertiary-border-color-default: transparent;--button-tertiary-border-color-disabled: transparent;--button-tertiary-border-color-focus: transparent;--button-tertiary-border-color-hover: transparent;--button-tertiary-border-color-pressed: transparent;--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--penpot-color-accent-primary);--button-tertiary-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-tertiary-icon-color-focus: var(--penpot-color-accent-primary);--button-tertiary-icon-color-hover: var(--penpot-color-accent-primary);--button-tertiary-icon-color-pressed: var(--penpot-color-accent-primary);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--penpot-color-accent-primary);--button-tertiary-text-color-disabled: var(--penpot-color-foreground-disabled);--button-tertiary-text-color-focus: var(--penpot-color-accent-primary);--button-tertiary-text-color-hover: var(--penpot-color-accent-primary);--button-tertiary-text-color-pressed: var(--penpot-color-accent-primary);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: none;--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-small);--icon-button-base-background-color: transparent;--icon-button-base-border-color: transparent;--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-medium);--icon-button-base-icon-color: var(--penpot-color-background-secondary);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xxxsmall);--icon-button-base-notification-top: var(--size-pos-xxxsmall);--icon-button-base-notification-width: var(--size-pos-xxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-xlarge);--icon-button-base-text-color: var(--penpot-color-background-secondary);--icon-button-base-width: var(--size-pos-medium);--icon-button-default-background-color-default: var(--penpot-color-background-primary);--icon-button-default-background-color-disabled: var(--penpot-color-background-quaternary);--icon-button-default-background-color-focus: var(--penpot-color-background-tertiary);--icon-button-default-background-color-hover: var(--penpot-color-background-tertiary);--icon-button-default-background-color-onselected: var(--penpot-color-accent-primary-muted);--icon-button-default-background-color-onselected-disabled: var(--penpot-color-accent-primary-muted);--icon-button-default-background-color-onselected-hover: var(--penpot-color-accent-primary-muted);--icon-button-default-background-color-pressed: var(--penpot-color-background-secondary);--icon-button-default-border-color-default: transparent;--icon-button-default-border-color-disabled: transparent;--icon-button-default-border-color-focus: var(--penpot-color-accent-primary);--icon-button-default-border-color-hover: transparent;--icon-button-default-border-color-pressed: transparent;--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--penpot-color-icon-default);--icon-button-default-icon-color-disabled: var(--penpot-color-foreground-disabled);--icon-button-default-icon-color-focus: var(--penpot-color-foreground-primary);--icon-button-default-icon-color-hover: var(--penpot-color-accent-primary);--icon-button-default-icon-color-pressed: var(--penpot-color-accent-primary);--icon-button-default-notification-background-color-default: var(--penpot-color-accent-primary);--icon-button-default-notification-background-color-disabled: var(--penpot-color-accent-primary-muted);--icon-button-default-notification-background-color-focus: var(--penpot-color-accent-primary);--icon-button-default-notification-background-color-hover: var(--penpot-color-accent-primary);--icon-button-default-notification-background-color-pressed: var(--penpot-color-accent-primary);--icon-button-default-notification-border-color-default: var(--penpot-color-background-primary);--icon-button-default-notification-border-color-disabled: var(--penpot-color-background-quaternary);--icon-button-default-notification-border-color-focus: var(--penpot-color-background-tertiary);--icon-button-default-notification-border-color-hover: var(--penpot-color-background-tertiary);--icon-button-default-notification-border-color-pressed: var(--penpot-color-background-secondary);--icon-button-large-height: var(--size-pos-medium);--icon-button-large-width: var(--size-pos-medium);--icon-button-selected-background-color-default: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-disabled: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-focus: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-hover: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-pressed: var(--penpot-color-background-tertiary);--icon-button-selected-border-color-default: transparent;--icon-button-selected-border-color-disabled: transparent;--icon-button-selected-border-color-focus: var(--penpot-color-accent-primary);--icon-button-selected-border-color-hover: transparent;--icon-button-selected-border-color-pressed: transparent;--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--penpot-color-accent-primary);--icon-button-selected-icon-color-disabled: var(--penpot-color-accent-primary-muted);--icon-button-selected-icon-color-focus: var(--penpot-color-accent-primary);--icon-button-selected-icon-color-hover: var(--penpot-color-accent-primary);--icon-button-selected-icon-color-pressed: var(--penpot-color-accent-primary);--icon-button-selected-notification-background-color-default: var(--penpot-color-accent-primary);--icon-button-selected-notification-background-color-disabled: var(--penpot-color-accent-primary-muted);--icon-button-selected-notification-background-color-focus: var(--penpot-color-accent-primary);--icon-button-selected-notification-background-color-hover: var(--penpot-color-accent-primary);--icon-button-selected-notification-background-color-pressed: var(--penpot-color-accent-primary);--icon-button-selected-notification-border-color-default: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-disabled: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-focus: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-hover: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-pressed: var(--penpot-color-background-tertiary);--icon-button-small-height: var(--size-pos-msmall);--icon-button-small-width: var(--size-pos-msmall)}:root[data-theme=sketch]{--button-alternative-background-color-default: var(--sketch-color-accent-disabled);--button-alternative-background-color-disabled: var(--sketch-color-accent-disabled);--button-alternative-background-color-focus: var(--sketch-color-accent-disabled);--button-alternative-background-color-hover: var(--sketch-color-accent-tertiary);--button-alternative-background-color-pressed: var(--sketch-color-accent-tertiary);--button-alternative-border-color-default: transparent;--button-alternative-border-color-disabled: transparent;--button-alternative-border-color-focus: var(--sketch-color-accent-primary);--button-alternative-border-color-hover: transparent;--button-alternative-border-color-pressed: transparent;--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--sketch-color-accent-primary);--button-alternative-icon-color-disabled: var(--sketch-color-accent-tertiary);--button-alternative-icon-color-focus: var(--sketch-color-accent-primary);--button-alternative-icon-color-hover: var(--sketch-color-accent-primary);--button-alternative-icon-color-pressed: var(--sketch-color-accent-primary);--button-alternative-text-color-default: var(--sketch-color-accent-primary);--button-alternative-text-color-disabled: var(--sketch-color-accent-tertiary);--button-alternative-text-color-focus: var(--sketch-color-accent-primary);--button-alternative-text-color-hover: var(--sketch-color-accent-primary);--button-alternative-text-color-pressed: var(--sketch-color-accent-primary);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: none;--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: transparent;--button-base-border-color: transparent;--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-medium);--button-base-icon-color: var(--sketch-color-foreground-primary);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xmsmall);--button-base-padding-right: var(--size-pos-xmsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-large);--button-base-text-color: var(--sketch-color-foreground-primary);--button-base-text-decoration: none;--button-base-text-font-family: var(--font-stack);--button-base-text-font-size: var(--font-size-medium);--button-base-text-font-weight: var(--font-weight-bold);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-small);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: none;--button-destructive-background-color-default: var(--sketch-color-accent-error);--button-destructive-background-color-disabled: var(--sketch-color-background-error);--button-destructive-background-color-focus: var(--sketch-color-accent-error);--button-destructive-background-color-hover: var(--sketch-color-foreground-error);--button-destructive-background-color-pressed: var(--sketch-color-foreground-error);--button-destructive-border-color-default: transparent;--button-destructive-border-color-disabled: transparent;--button-destructive-border-color-focus: var(--sketch-color-border-tertiary);--button-destructive-border-color-hover: transparent;--button-destructive-border-color-pressed: transparent;--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--sketch-color-foreground-onaccent);--button-destructive-icon-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-destructive-icon-color-focus: var(--sketch-color-foreground-onaccent);--button-destructive-icon-color-hover: var(--sketch-color-foreground-onaccent);--button-destructive-icon-color-pressed: var(--sketch-color-foreground-onaccent);--button-destructive-text-color-default: var(--sketch-color-foreground-onaccent);--button-destructive-text-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-destructive-text-color-focus: var(--sketch-color-foreground-onaccent);--button-destructive-text-color-hover: var(--sketch-color-foreground-onaccent);--button-destructive-text-color-pressed: var(--sketch-color-foreground-onaccent);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: none;--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-small);--button-large-padding-right: var(--size-pos-small);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--sketch-color-accent-secondary);--button-primary-background-color-disabled: var(--sketch-color-accent-tertiary);--button-primary-background-color-focus: var(--sketch-color-accent-secondary);--button-primary-background-color-hover: var(--sketch-color-accent-primary);--button-primary-background-color-pressed: var(--sketch-color-accent-primary);--button-primary-border-color-default: transparent;--button-primary-border-color-disabled: none;--button-primary-border-color-focus: var(--sketch-color-accent-tertiary);--button-primary-border-color-hover: transparent;--button-primary-border-color-pressed: transparent;--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--sketch-color-foreground-onaccent);--button-primary-icon-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-primary-icon-color-focus: var(--sketch-color-foreground-onaccent);--button-primary-icon-color-hover: var(--sketch-color-foreground-onaccent);--button-primary-icon-color-pressed: var(--sketch-color-foreground-onaccent);--button-primary-text-color-default: var(--sketch-color-foreground-onaccent);--button-primary-text-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-primary-text-color-focus: var(--sketch-color-foreground-onaccent);--button-primary-text-color-hover: var(--sketch-color-foreground-onaccent);--button-primary-text-color-pressed: var(--sketch-color-foreground-onaccent);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: none;--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--sketch-color-background-primary);--button-secondary-background-color-disabled: var(--sketch-color-background-secondary);--button-secondary-background-color-focus: var(--sketch-color-background-primary);--button-secondary-background-color-hover: var(--sketch-color-background-secondary);--button-secondary-background-color-pressed: var(--sketch-color-background-secondary);--button-secondary-border-color-default: var(--sketch-color-border-primary);--button-secondary-border-color-disabled: var(--sketch-color-border-disabled);--button-secondary-border-color-focus: var(--sketch-color-accent-primary);--button-secondary-border-color-hover: var(--sketch-color-border-primary);--button-secondary-border-color-pressed: var(--sketch-color-border-primary);--button-secondary-border-offset-default: var(--size-neg-unit);--button-secondary-border-offset-disabled: var(--size-neg-unit);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-neg-unit);--button-secondary-border-offset-pressed: var(--size-neg-unit);--button-secondary-border-width-default: var(--size-pos-unit);--button-secondary-border-width-disabled: var(--size-pos-unit);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-pos-unit);--button-secondary-border-width-pressed: var(--size-pos-unit);--button-secondary-icon-color-default: var(--sketch-color-foreground-tertiary);--button-secondary-icon-color-disabled: var(--sketch-color-foreground-disabled);--button-secondary-icon-color-focus: var(--sketch-color-foreground-tertiary);--button-secondary-icon-color-hover: var(--sketch-color-foreground-tertiary);--button-secondary-icon-color-pressed: var(--sketch-color-foreground-tertiary);--button-secondary-text-color-default: var(--sketch-color-foreground-primary);--button-secondary-text-color-disabled: var(--sketch-color-foreground-disabled);--button-secondary-text-color-focus: var(--sketch-color-foreground-primary);--button-secondary-text-color-hover: var(--sketch-color-foreground-primary);--button-secondary-text-color-pressed: var(--sketch-color-foreground-primary);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: none;--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-small);--button-tertiary-background-color-default: var(--sketch-color-background-primary);--button-tertiary-background-color-disabled: var(--sketch-color-background-primary);--button-tertiary-background-color-focus: var(--sketch-color-background-primary);--button-tertiary-background-color-hover: var(--sketch-color-background-primary);--button-tertiary-background-color-pressed: var(--sketch-color-background-primary);--button-tertiary-border-color-default: transparent;--button-tertiary-border-color-disabled: transparent;--button-tertiary-border-color-focus: transparent;--button-tertiary-border-color-hover: transparent;--button-tertiary-border-color-pressed: transparent;--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--sketch-color-accent-primary);--button-tertiary-icon-color-disabled: var(--sketch-color-accent-disabled);--button-tertiary-icon-color-focus: var(--sketch-color-accent-primary);--button-tertiary-icon-color-hover: var(--sketch-color-accent-primary);--button-tertiary-icon-color-pressed: var(--sketch-color-accent-primary);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--sketch-color-accent-primary);--button-tertiary-text-color-disabled: var(--sketch-color-accent-tertiary);--button-tertiary-text-color-focus: var(--sketch-color-accent-primary);--button-tertiary-text-color-hover: var(--sketch-color-accent-primary);--button-tertiary-text-color-pressed: var(--sketch-color-accent-primary);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: none;--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-medium);--icon-button-base-background-color: transparent;--icon-button-base-border-color: transparent;--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-medium);--icon-button-base-icon-color: var(--sketch-color-background-secondary);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xxxsmall);--icon-button-base-notification-top: var(--size-pos-xxxsmall);--icon-button-base-notification-width: var(--size-pos-xxxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-large);--icon-button-base-text-color: var(--sketch-color-background-secondary);--icon-button-base-width: var(--size-pos-large);--icon-button-default-background-color-default: var(--sketch-color-background-primary);--icon-button-default-background-color-disabled: var(--sketch-color-background-primary);--icon-button-default-background-color-focus: var(--sketch-color-background-primary);--icon-button-default-background-color-hover: var(--sketch-color-background-secondary);--icon-button-default-background-color-onselected: var(--sketch-color-accent-tertiary);--icon-button-default-background-color-onselected-disabled: var(--sketch-color-accent-disabled);--icon-button-default-background-color-onselected-hover: var(--sketch-color-accent-tertiary);--icon-button-default-background-color-pressed: var(--sketch-color-background-secondary);--icon-button-default-border-color-default: transparent;--icon-button-default-border-color-disabled: transparent;--icon-button-default-border-color-focus: var(--sketch-color-accent-primary);--icon-button-default-border-color-hover: transparent;--icon-button-default-border-color-pressed: transparent;--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--sketch-color-foreground-tertiary);--icon-button-default-icon-color-disabled: var(--sketch-color-foreground-disabled);--icon-button-default-icon-color-focus: var(--sketch-color-foreground-primary);--icon-button-default-icon-color-hover: var(--sketch-color-foreground-primary);--icon-button-default-icon-color-pressed: var(--sketch-color-foreground-primary);--icon-button-default-notification-background-color-default: var(--sketch-color-accent-primary);--icon-button-default-notification-background-color-disabled: var(--sketch-color-accent-tertiary);--icon-button-default-notification-background-color-focus: var(--sketch-color-accent-primary);--icon-button-default-notification-background-color-hover: var(--sketch-color-accent-primary);--icon-button-default-notification-background-color-pressed: var(--sketch-color-accent-primary);--icon-button-default-notification-border-color-default: var(--sketch-color-background-primary);--icon-button-default-notification-border-color-disabled: var(--sketch-color-background-secondary);--icon-button-default-notification-border-color-focus: var(--sketch-color-background-primary);--icon-button-default-notification-border-color-hover: var(--sketch-color-background-tertiary);--icon-button-default-notification-border-color-pressed: var(--sketch-color-background-tertiary);--icon-button-large-height: var(--size-pos-large);--icon-button-large-width: var(--size-pos-xlarge);--icon-button-selected-background-color-default: var(--sketch-color-accent-disabled);--icon-button-selected-background-color-disabled: var(--sketch-color-accent-disabled);--icon-button-selected-background-color-focus: var(--sketch-color-accent-disabled);--icon-button-selected-background-color-hover: var(--sketch-color-accent-tertiary);--icon-button-selected-background-color-pressed: var(--sketch-color-accent-tertiary);--icon-button-selected-border-color-default: transparent;--icon-button-selected-border-color-disabled: transparent;--icon-button-selected-border-color-focus: var(--sketch-color-accent-primary);--icon-button-selected-border-color-hover: transparent;--icon-button-selected-border-color-pressed: transparent;--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--sketch-color-accent-primary);--icon-button-selected-icon-color-disabled: var(--sketch-color-accent-tertiary);--icon-button-selected-icon-color-focus: var(--sketch-color-accent-primary);--icon-button-selected-icon-color-hover: var(--sketch-color-accent-primary);--icon-button-selected-icon-color-pressed: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-default: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-disabled: var(--sketch-color-accent-tertiary);--icon-button-selected-notification-background-color-focus: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-hover: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-pressed: var(--sketch-color-accent-primary);--icon-button-selected-notification-border-color-default: var(--sketch-color-accent-disabled);--icon-button-selected-notification-border-color-disabled: var(--sketch-color-accent-disabled);--icon-button-selected-notification-border-color-focus: var(--sketch-color-accent-disabled);--icon-button-selected-notification-border-color-hover: var(--sketch-color-accent-tertiary);--icon-button-selected-notification-border-color-pressed: var(--sketch-color-accent-tertiary);--icon-button-small-height: var(--size-pos-small);--icon-button-small-width: var(--size-pos-medium)}:root[data-theme=figma]{--button-alternative-background-color-default: var(--figma-color-bg-component);--button-alternative-background-color-disabled: var(--figma-color-bg-disabled);--button-alternative-background-color-focus: var(--figma-color-bg-component);--button-alternative-background-color-hover: var(--figma-color-bg-component);--button-alternative-background-color-pressed: var(--figma-color-bg-component-pressed);--button-alternative-border-color-default: transparent;--button-alternative-border-color-disabled: transparent;--button-alternative-border-color-focus: var(--figma-color-border-oncomponent-strong);--button-alternative-border-color-hover: transparent;--button-alternative-border-color-pressed: transparent;--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--figma-color-icon-oncomponent);--button-alternative-icon-color-disabled: var(--figma-color-icon-ondisabled);--button-alternative-icon-color-focus: var(--figma-color-icon-oncomponent);--button-alternative-icon-color-hover: var(--figma-color-icon-oncomponent);--button-alternative-icon-color-pressed: var(--figma-color-icon-oncomponent);--button-alternative-text-color-default: var(--figma-color-text-oncomponent);--button-alternative-text-color-disabled: var(--figma-color-text-ondisabled);--button-alternative-text-color-focus: var(--figma-color-text-oncomponent);--button-alternative-text-color-hover: var(--figma-color-text-oncomponent);--button-alternative-text-color-pressed: var(--figma-color-text-oncomponent);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: none;--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: transparent;--button-base-border-color: transparent;--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-small);--button-base-icon-color: var(--figma-color-icon);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xxsmall);--button-base-padding-right: var(--size-pos-xxsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-medium);--button-base-text-color: var(--figma-color-text);--button-base-text-decoration: none;--button-base-text-font-family: var(--font-stack);--button-base-text-font-size: var(--font-size-xsmall);--button-base-text-font-weight: var(--font-weight-accent);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-small);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: none;--button-destructive-background-color-default: var(--figma-color-bg-danger);--button-destructive-background-color-disabled: var(--figma-color-bg-disabled);--button-destructive-background-color-focus: var(--figma-color-bg-danger);--button-destructive-background-color-hover: var(--figma-color-bg-danger);--button-destructive-background-color-pressed: var(--figma-color-bg-danger-pressed);--button-destructive-border-color-default: transparent;--button-destructive-border-color-disabled: transparent;--button-destructive-border-color-focus: var(--figma-color-border-ondanger-strong);--button-destructive-border-color-hover: transparent;--button-destructive-border-color-pressed: transparent;--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--figma-color-icon-ondanger);--button-destructive-icon-color-disabled: var(--figma-color-icon-ondisabled);--button-destructive-icon-color-focus: var(--figma-color-icon-ondanger);--button-destructive-icon-color-hover: var(--figma-color-icon-ondanger);--button-destructive-icon-color-pressed: var(--figma-color-icon-ondanger);--button-destructive-text-color-default: var(--figma-color-text-ondanger);--button-destructive-text-color-disabled: var(--figma-color-text-ondisabled);--button-destructive-text-color-focus: var(--figma-color-text-ondanger);--button-destructive-text-color-hover: var(--figma-color-text-ondanger);--button-destructive-text-color-pressed: var(--figma-color-text-ondanger);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: none;--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-medium);--button-large-padding-right: var(--size-pos-medium);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--figma-color-bg-brand);--button-primary-background-color-disabled: var(--figma-color-bg-disabled);--button-primary-background-color-focus: var(--figma-color-bg-brand);--button-primary-background-color-hover: var(--figma-color-bg-brand);--button-primary-background-color-pressed: var(--figma-color-bg-brand-pressed);--button-primary-border-color-default: transparent;--button-primary-border-color-disabled: none;--button-primary-border-color-focus: var(--figma-color-border-onbrand-strong);--button-primary-border-color-hover: transparent;--button-primary-border-color-pressed: transparent;--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--figma-color-icon-onbrand);--button-primary-icon-color-disabled: var(--figma-color-icon-ondisabled);--button-primary-icon-color-focus: var(--figma-color-icon-onbrand);--button-primary-icon-color-hover: var(--figma-color-icon-onbrand);--button-primary-icon-color-pressed: var(--figma-color-icon-onbrand);--button-primary-text-color-default: var(--figma-color-text-onbrand);--button-primary-text-color-disabled: var(--figma-color-text-ondisabled);--button-primary-text-color-focus: var(--figma-color-text-onbrand);--button-primary-text-color-hover: var(--figma-color-text-onbrand);--button-primary-text-color-pressed: var(--figma-color-text-onbrand);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: none;--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--figma-color-bg);--button-secondary-background-color-disabled: var(--figma-color-bg);--button-secondary-background-color-focus: var(--figma-color-bg);--button-secondary-background-color-hover: var(--figma-color-bg);--button-secondary-background-color-pressed: var(--figma-color-bg-pressed);--button-secondary-border-color-default: var(--figma-color-border-disabled);--button-secondary-border-color-disabled: var(--figma-color-border-disabled);--button-secondary-border-color-focus: var(--figma-color-border-selected);--button-secondary-border-color-hover: var(--figma-color-border-disabled);--button-secondary-border-color-pressed: var(--figma-color-border-disabled);--button-secondary-border-offset-default: var(--size-neg-unit);--button-secondary-border-offset-disabled: var(--size-neg-unit);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-neg-unit);--button-secondary-border-offset-pressed: var(--size-neg-unit);--button-secondary-border-width-default: var(--size-pos-unit);--button-secondary-border-width-disabled: var(--size-pos-unit);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-pos-unit);--button-secondary-border-width-pressed: var(--size-pos-unit);--button-secondary-icon-color-default: var(--figma-color-icon);--button-secondary-icon-color-disabled: var(--figma-color-icon-disabled);--button-secondary-icon-color-focus: var(--figma-color-icon);--button-secondary-icon-color-hover: var(--figma-color-icon);--button-secondary-icon-color-pressed: var(--figma-color-icon);--button-secondary-text-color-default: var(--figma-color-text);--button-secondary-text-color-disabled: var(--figma-color-text-disabled);--button-secondary-text-color-focus: var(--figma-color-text);--button-secondary-text-color-hover: var(--figma-color-text);--button-secondary-text-color-pressed: var(--figma-color-text);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: none;--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-small);--button-tertiary-background-color-default: var(--figma-color-bg);--button-tertiary-background-color-disabled: var(--figma-color-bg);--button-tertiary-background-color-focus: var(--figma-color-bg);--button-tertiary-background-color-hover: var(--figma-color-bg);--button-tertiary-background-color-pressed: var(--figma-color-bg);--button-tertiary-border-color-default: transparent;--button-tertiary-border-color-disabled: transparent;--button-tertiary-border-color-focus: transparent;--button-tertiary-border-color-hover: transparent;--button-tertiary-border-color-pressed: transparent;--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--figma-color-icon-brand);--button-tertiary-icon-color-disabled: var(--figma-color-icon-disabled);--button-tertiary-icon-color-focus: var(--figma-color-icon-brand);--button-tertiary-icon-color-hover: var(--figma-color-icon-brand);--button-tertiary-icon-color-pressed: var(--figma-color-icon-brand);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--figma-color-text-brand);--button-tertiary-text-color-disabled: var(--figma-color-text-disabled);--button-tertiary-text-color-focus: var(--figma-color-text-brand);--button-tertiary-text-color-hover: var(--figma-color-text-brand);--button-tertiary-text-color-pressed: var(--figma-color-text-brand);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: none;--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-xsmall);--icon-button-base-background-color: transparent;--icon-button-base-border-color: transparent;--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-small);--icon-button-base-icon-color: var(--figma-color-icon);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xunit);--icon-button-base-notification-top: var(--size-pos-xunit);--icon-button-base-notification-width: var(--size-pos-xxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-medium);--icon-button-base-text-color: var(--figma-color-text);--icon-button-base-width: var(--size-pos-small);--icon-button-default-background-color-default: var(--figma-color-bg);--icon-button-default-background-color-disabled: var(--figma-color-bg);--icon-button-default-background-color-focus: var(--figma-color-bg);--icon-button-default-background-color-hover: var(--figma-color-bg-hover);--icon-button-default-background-color-onselected: var(--figma-color-bg-selected);--icon-button-default-background-color-onselected-disabled: var(--figma-color-bg-brand-tertiary);--icon-button-default-background-color-onselected-hover: var(--figma-color-bg-selected-hover);--icon-button-default-background-color-pressed: var(--figma-color-bg-pressed);--icon-button-default-border-color-default: transparent;--icon-button-default-border-color-disabled: transparent;--icon-button-default-border-color-focus: var(--figma-color-border-selected);--icon-button-default-border-color-hover: transparent;--icon-button-default-border-color-pressed: transparent;--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--figma-color-icon);--icon-button-default-icon-color-disabled: var(--figma-color-icon-disabled);--icon-button-default-icon-color-focus: var(--figma-color-icon);--icon-button-default-icon-color-hover: var(--figma-color-icon);--icon-button-default-icon-color-pressed: var(--figma-color-icon);--icon-button-default-notification-background-color-default: var(--figma-color-bg-brand);--icon-button-default-notification-background-color-disabled: var(--figma-color-bg-brand-secondary);--icon-button-default-notification-background-color-focus: var(--figma-color-bg-brand);--icon-button-default-notification-background-color-hover: var(--figma-color-bg-brand);--icon-button-default-notification-background-color-pressed: var(--figma-color-bg-brand);--icon-button-default-notification-border-color-default: var(--figma-color-bg);--icon-button-default-notification-border-color-disabled: var(--figma-color-bg);--icon-button-default-notification-border-color-focus: var(--figma-color-bg);--icon-button-default-notification-border-color-hover: var(--figma-color-bg-hover);--icon-button-default-notification-border-color-pressed: var(--figma-color-bg-pressed);--icon-button-large-height: var(--size-pos-medium);--icon-button-large-width: var(--size-pos-medium);--icon-button-selected-background-color-default: var(--figma-color-bg-selected);--icon-button-selected-background-color-disabled: var(--figma-color-bg-brand-tertiary);--icon-button-selected-background-color-focus: var(--figma-color-bg-selected);--icon-button-selected-background-color-hover: var(--figma-color-bg-selected-hover);--icon-button-selected-background-color-pressed: var(--figma-color-bg-selected-pressed);--icon-button-selected-border-color-default: transparent;--icon-button-selected-border-color-disabled: transparent;--icon-button-selected-border-color-focus: var(--figma-color-border-selected);--icon-button-selected-border-color-hover: transparent;--icon-button-selected-border-color-pressed: transparent;--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--figma-color-icon-brand);--icon-button-selected-icon-color-disabled: var(--figma-color-icon-brand-secondary);--icon-button-selected-icon-color-focus: var(--figma-color-icon-brand);--icon-button-selected-icon-color-hover: var(--figma-color-icon-brand);--icon-button-selected-icon-color-pressed: var(--figma-color-icon-brand);--icon-button-selected-notification-background-color-default: var(--figma-color-bg-brand);--icon-button-selected-notification-background-color-disabled: var(--figma-color-bg-brand-secondary);--icon-button-selected-notification-background-color-focus: var(--figma-color-bg-brand);--icon-button-selected-notification-background-color-hover: var(--figma-color-bg-brand);--icon-button-selected-notification-background-color-pressed: var(--figma-color-bg-brand);--icon-button-selected-notification-border-color-default: var(--figma-color-bg-selected);--icon-button-selected-notification-border-color-disabled: var(--figma-color-bg-selected);--icon-button-selected-notification-border-color-focus: var(--figma-color-bg-selected);--icon-button-selected-notification-border-color-hover: var(--figma-color-bg-tertiary);--icon-button-selected-notification-border-color-pressed: var(--figma-color-bg-brand-tertiary);--icon-button-small-height: var(--size-pos-msmall);--icon-button-small-width: var(--size-pos-msmall)}:root[data-theme=framer]{--button-alternative-background-color-default: var(--framer-color-tint-dimmed);--button-alternative-background-color-disabled: var(--framer-color-bg-tertiary);--button-alternative-background-color-focus: var(--framer-color-tint-dimmed);--button-alternative-background-color-hover: var(--framer-color-tint);--button-alternative-background-color-pressed: var(--framer-color-tint-dimmed);--button-alternative-border-color-default: transparent;--button-alternative-border-color-disabled: transparent;--button-alternative-border-color-focus: var(--framer-color-tint);--button-alternative-border-color-hover: transparent;--button-alternative-border-color-pressed: transparent;--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--framer-color-tint);--button-alternative-icon-color-disabled: var(--framer-color-text-tertiary);--button-alternative-icon-color-focus: var(--framer-color-tint);--button-alternative-icon-color-hover: var(--framer-color-text-reversed);--button-alternative-icon-color-pressed: var(--framer-color-tint);--button-alternative-text-color-default: var(--framer-color-tint);--button-alternative-text-color-disabled: var(--framer-color-text-tertiary);--button-alternative-text-color-focus: var(--framer-color-tint);--button-alternative-text-color-hover: var(--framer-color-text-reversed);--button-alternative-text-color-pressed: var(--framer-color-tint);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: none;--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: transparent;--button-base-border-color: transparent;--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-medium);--button-base-icon-color: var(--framer-color-text);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xmsmall);--button-base-padding-right: var(--size-pos-xmsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-xlarge);--button-base-text-color: var(--framer-color-text);--button-base-text-decoration: none;--button-base-text-font-family: var(--font-stack);--button-base-text-font-size: var(--font-size-small);--button-base-text-font-weight: var(--font-weight-bold);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-small);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: none;--button-destructive-background-color-default: var(--framer-color-destructive);--button-destructive-background-color-disabled: var(--framer-color-bg-tertiary);--button-destructive-background-color-focus: var(--framer-color-destructive-dark);--button-destructive-background-color-hover: var(--framer-color-destructive-dark);--button-destructive-background-color-pressed: var(--framer-color-destructive);--button-destructive-border-color-default: transparent;--button-destructive-border-color-disabled: transparent;--button-destructive-border-color-focus: var(--framer-color-destructive-extra-dark);--button-destructive-border-color-hover: transparent;--button-destructive-border-color-pressed: transparent;--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--framer-color-text-reversed);--button-destructive-icon-color-disabled: var(--framer-color-text-tertiary);--button-destructive-icon-color-focus: var(--framer-color-text-reversed);--button-destructive-icon-color-hover: var(--framer-color-text-reversed);--button-destructive-icon-color-pressed: var(--framer-color-text-reversed);--button-destructive-text-color-default: var(--framer-color-text-reversed);--button-destructive-text-color-disabled: var(--framer-color-text-tertiary);--button-destructive-text-color-focus: var(--framer-color-text-reversed);--button-destructive-text-color-hover: var(--framer-color-text-reversed);--button-destructive-text-color-pressed: var(--framer-color-text-reversed);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: none;--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-medium);--button-large-padding-right: var(--size-pos-medium);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--framer-color-tint);--button-primary-background-color-disabled: var(--framer-color-bg-tertiary);--button-primary-background-color-focus: var(--framer-color-tint-dark);--button-primary-background-color-hover: var(--framer-color-tint-dark);--button-primary-background-color-pressed: var(--framer-color-tint);--button-primary-border-color-default: transparent;--button-primary-border-color-disabled: none;--button-primary-border-color-focus: var(--framer-color-tint-extra-dark);--button-primary-border-color-hover: transparent;--button-primary-border-color-pressed: transparent;--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--framer-color-text-reversed);--button-primary-icon-color-disabled: var(--framer-color-text-tertiary);--button-primary-icon-color-focus: var(--framer-color-text-reversed);--button-primary-icon-color-hover: var(--framer-color-text-reversed);--button-primary-icon-color-pressed: var(--framer-color-text-reversed);--button-primary-text-color-default: var(--framer-color-text-reversed);--button-primary-text-color-disabled: var(--framer-color-text-tertiary);--button-primary-text-color-focus: var(--framer-color-text-reversed);--button-primary-text-color-hover: var(--framer-color-text-reversed);--button-primary-text-color-pressed: var(--framer-color-text-reversed);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: none;--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--framer-color-bg-secondary);--button-secondary-background-color-disabled: var(--framer-color-bg-tertiary);--button-secondary-background-color-focus: var(--framer-color-bg-tertiary);--button-secondary-background-color-hover: var(--framer-color-bg-tertiary);--button-secondary-background-color-pressed: var(--framer-color-bg-secondary);--button-secondary-border-color-default: transparent;--button-secondary-border-color-disabled: transparent;--button-secondary-border-color-focus: var(--framer-color-tint);--button-secondary-border-color-hover: transparent;--button-secondary-border-color-pressed: transparent;--button-secondary-border-offset-default: var(--size-null);--button-secondary-border-offset-disabled: var(--size-null);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-null);--button-secondary-border-offset-pressed: var(--size-null);--button-secondary-border-width-default: var(--size-null);--button-secondary-border-width-disabled: var(--size-null);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-null);--button-secondary-border-width-pressed: var(--size-null);--button-secondary-icon-color-default: var(--framer-color-text);--button-secondary-icon-color-disabled: var(--framer-color-text-tertiary);--button-secondary-icon-color-focus: var(--framer-color-text);--button-secondary-icon-color-hover: var(--framer-color-text);--button-secondary-icon-color-pressed: var(--framer-color-text);--button-secondary-text-color-default: var(--framer-color-text);--button-secondary-text-color-disabled: var(--framer-color-text-tertiary);--button-secondary-text-color-focus: var(--framer-color-text);--button-secondary-text-color-hover: var(--framer-color-text);--button-secondary-text-color-pressed: var(--framer-color-text);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: none;--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-medium);--button-tertiary-background-color-default: var(--framer-color-bg);--button-tertiary-background-color-disabled: var(--framer-color-bg);--button-tertiary-background-color-focus: var(--framer-color-bg);--button-tertiary-background-color-hover: var(--framer-color-bg);--button-tertiary-background-color-pressed: var(--framer-color-bg);--button-tertiary-border-color-default: transparent;--button-tertiary-border-color-disabled: transparent;--button-tertiary-border-color-focus: transparent;--button-tertiary-border-color-hover: transparent;--button-tertiary-border-color-pressed: transparent;--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--framer-color-tint);--button-tertiary-icon-color-disabled: var(--framer-color-text-tertiary);--button-tertiary-icon-color-focus: var(--framer-color-tint);--button-tertiary-icon-color-hover: var(--framer-color-tint);--button-tertiary-icon-color-pressed: var(--framer-color-tint);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--framer-color-tint);--button-tertiary-text-color-disabled: var(--framer-color-text-tertiary);--button-tertiary-text-color-focus: var(--framer-color-tint);--button-tertiary-text-color-hover: var(--framer-color-tint);--button-tertiary-text-color-pressed: var(--framer-color-tint);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: none;--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-small);--icon-button-base-background-color: transparent;--icon-button-base-border-color: transparent;--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-medium);--icon-button-base-icon-color: var(--framer-color-text);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xxxsmall);--icon-button-base-notification-top: var(--size-pos-xxxsmall);--icon-button-base-notification-width: var(--size-pos-xxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-xlarge);--icon-button-base-text-color: var(--framer-color-text);--icon-button-base-width: var(--size-pos-medium);--icon-button-default-background-color-default: var(--framer-color-bg);--icon-button-default-background-color-disabled: var(--framer-color-bg);--icon-button-default-background-color-focus: var(--framer-color-bg-secondary);--icon-button-default-background-color-hover: var(--framer-color-bg-secondary);--icon-button-default-background-color-onselected: var(--framer-color-tint-dimmed);--icon-button-default-background-color-onselected-disabled: var(--framer-color-tint-dimmed);--icon-button-default-background-color-onselected-hover: var(--framer-color-tint);--icon-button-default-background-color-pressed: var(--framer-color-bg);--icon-button-default-border-color-default: transparent;--icon-button-default-border-color-disabled: transparent;--icon-button-default-border-color-focus: var(--framer-color-tint);--icon-button-default-border-color-hover: transparent;--icon-button-default-border-color-pressed: transparent;--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--framer-color-text);--icon-button-default-icon-color-disabled: var(--framer-color-text-tertiary);--icon-button-default-icon-color-focus: var(--framer-color-text);--icon-button-default-icon-color-hover: var(--framer-color-text);--icon-button-default-icon-color-pressed: var(--framer-color-text);--icon-button-default-notification-background-color-default: var(--framer-color-tint);--icon-button-default-notification-background-color-disabled: var(--framer-color-bg-tertiary);--icon-button-default-notification-background-color-focus: var(--framer-color-tint);--icon-button-default-notification-background-color-hover: var(--framer-color-tint);--icon-button-default-notification-background-color-pressed: var(--framer-color-tint);--icon-button-default-notification-border-color-default: var(--framer-color-bg);--icon-button-default-notification-border-color-disabled: var(--framer-color-bg);--icon-button-default-notification-border-color-focus: var(--framer-color-bg-secondary);--icon-button-default-notification-border-color-hover: var(--framer-color-bg-secondary);--icon-button-default-notification-border-color-pressed: var(--framer-color-bg);--icon-button-large-height: var(--size-pos-large);--icon-button-large-width: var(--size-pos-large);--icon-button-selected-background-color-default: var(--framer-color-text);--icon-button-selected-background-color-disabled: var(--framer-color-text-tertiary);--icon-button-selected-background-color-focus: var(--framer-color-text);--icon-button-selected-background-color-hover: var(--framer-color-text);--icon-button-selected-background-color-pressed: var(--framer-color-text);--icon-button-selected-border-color-default: transparent;--icon-button-selected-border-color-disabled: transparent;--icon-button-selected-border-color-focus: var(--framer-color-tint);--icon-button-selected-border-color-hover: transparent;--icon-button-selected-border-color-pressed: transparent;--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--framer-color-bg);--icon-button-selected-icon-color-disabled: var(--framer-color-bg);--icon-button-selected-icon-color-focus: var(--framer-color-bg);--icon-button-selected-icon-color-hover: var(--framer-color-bg);--icon-button-selected-icon-color-pressed: var(--framer-color-bg);--icon-button-selected-notification-background-color-default: var(--framer-color-tint);--icon-button-selected-notification-background-color-disabled: var(--framer-color-bg-tertiary);--icon-button-selected-notification-background-color-focus: var(--framer-color-tint);--icon-button-selected-notification-background-color-hover: var(--framer-color-tint);--icon-button-selected-notification-background-color-pressed: var(--framer-color-tint);--icon-button-selected-notification-border-color-default: var(--framer-color-text);--icon-button-selected-notification-border-color-disabled: var(--framer-color-text-tertiary);--icon-button-selected-notification-border-color-focus: var(--framer-color-text);--icon-button-selected-notification-border-color-hover: var(--framer-color-text);--icon-button-selected-notification-border-color-pressed: var(--framer-color-text);--icon-button-small-height: var(--size-pos-small);--icon-button-small-width: var(--size-pos-small)}.button__status{display:flex;align-items:center;gap:var(--button-status-gap);height:var(--button-status-height)}.button,.icon-button{display:flex;position:relative;justify-content:center;align-items:center;cursor:default;border:none;-webkit-user-select:none;user-select:none}.button:disabled,.icon-button:disabled{pointer-events:none}.button .button__icon,.icon-button .button__icon{display:flex;justify-content:center;align-items:center;width:var(--button-base-icon-width);height:var(--button-base-icon-height);--icon-picto-color: var(--button-base-icon-color)}.button .button__label,.icon-button .button__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button .button__caret,.icon-button .button__caret{display:flex;justify-content:center;align-items:center;width:var(--button-base-caret-width);height:var(--button-base-caret-height);--icon-picto-color: var(--button-base-icon-color)}.button .button__loader,.icon-button .button__loader{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%);z-index:2;--icon-picto-color: var(--button-base-icon-color)}.button.button--loading,.icon-button.button--loading{pointer-events:none}.button.button--loading>.button__label,.button.button--loading>.button__caret,.button.button--loading>.button__icon,.icon-button.button--loading>.button__label,.icon-button.button--loading>.button__caret,.icon-button.button--loading>.button__icon{opacity:0}.button{gap:var(--button-base-gap);outline:var(--button-base-border-width) solid var(--button-base-border-color);outline-offset:var(--button-base-border-offset);border-radius:var(--button-base-radius);background-color:var(--button-base-background-color);padding:var(--button-base-padding);height:var(--button-base-height);color:var(--button-base-text-color);font-weight:var(--button-base-text-font-weight);font-size:var(--button-base-text-font-size);line-height:var(--button-base-text-line-height);font-family:var(--button-base-text-font-family);letter-spacing:var(--button-base-text-letter-spacing);text-decoration:var(--button-base-text-decoration);text-transform:var(--button-base-text-transform)}.button a{color:var(--button-base-text-color);text-decoration:var(--button-base-text-decoration)}.button{--button-base-padding: var(--button-base-padding-top) var(--button-base-padding-right) var(--button-base-padding-bottom) var(--button-base-padding-left)}.button--small{--button-base-padding: var(--button-small-padding-top) var(--button-small-padding-right) var(--button-small-padding-bottom) var(--button-small-padding-left);--button-base-height: var(--button-small-height)}.button--large{--button-base-padding: var(--button-large-padding-top) var(--button-large-padding-right) var(--button-large-padding-bottom) var(--button-large-padding-left);--button-base-height: var(--button-large-height)}.button .icon-chip{pointer-events:auto}.button--primary{--button-base-background-color: var( --button-primary-background-color-default );--button-base-border-color: var(--button-primary-border-color-default);--button-base-border-width: var(--button-primary-border-width-default);--button-base-border-offset: var(--button-primary-border-offset-default);--button-base-text-color: var(--button-primary-text-color-default);--button-base-icon-color: var(--button-primary-icon-color-default);--button-base-text-decoration: var( --button-primary-text-decoration-default );--icon-picto-color: var(--button-primary-icon-color-default)}.button--primary:enabled:hover{--button-base-background-color: var( --button-primary-background-color-hover );--button-base-border-color: var(--button-primary-border-color-hover);--button-base-border-width: var(--button-primary-border-width-hover);--button-base-border-offset: var(--button-primary-border-offset-hover);--button-base-text-color: var(--button-primary-text-color-hover);--button-base-icon-color: var(--button-primary-icon-color-hover);--button-base-text-decoration: var( --button-primary-text-decoration-hover );--icon-picto-color: var(--button-primary-icon-color-hover)}.button--primary:enabled:focus{--button-base-background-color: var( --button-primary-background-color-focus );--button-base-border-color: var(--button-primary-border-color-focus);--button-base-border-width: var(--button-primary-border-width-focus);--button-base-border-offset: var(--button-primary-border-offset-focus);--button-base-text-color: var(--button-primary-text-color-focus);--button-base-icon-color: var(--button-primary-icon-color-focus);--button-base-text-decoration: var( --button-primary-text-decoration-focus );--icon-picto-color: var(--button-primary-icon-color-focus)}.button--primary:enabled:active{--button-base-background-color: var( --button-primary-background-color-pressed );--button-base-border-color: var(--button-primary-border-color-pressed);--button-base-border-width: var(--button-primary-border-width-pressed);--button-base-border-offset: var(--button-primary-border-offset-pressed);--button-base-text-color: var(--button-primary-text-color-pressed);--button-base-icon-color: var(--button-primary-icon-color-pressed);--button-base-text-decoration: var( --button-primary-text-decoration-pressed );--icon-picto-color: var(--button-primary-icon-color-pressed)}.button--primary:disabled{--button-base-background-color: var( --button-primary-background-color-disabled );--button-base-border-color: var(--button-primary-border-color-disabled);--button-base-border-width: var(--button-primary-border-width-disabled);--button-base-border-offset: var(--button-primary-border-offset-disabled);--button-base-text-color: var(--button-primary-text-color-disabled);--button-base-icon-color: var(--button-primary-icon-color-disabled);--button-base-text-decoration: var( --button-primary-text-decoration-disabled );--icon-picto-color: var(--button-primary-icon-color-disabled)}.button--secondary{--button-base-background-color: var( --button-secondary-background-color-default );--button-base-border-color: var(--button-secondary-border-color-default);--button-base-border-width: var(--button-secondary-border-width-default);--button-base-border-offset: var(--button-secondary-border-offset-default);--button-base-text-color: var(--button-secondary-text-color-default);--button-base-icon-color: var(--button-secondary-icon-color-default);--button-base-text-decoration: var( --button-secondary-text-decoration-default );--icon-picto-color: var(--button-secondary-icon-color-default)}.button--secondary:enabled:hover{--button-base-background-color: var( --button-secondary-background-color-hover );--button-base-border-color: var(--button-secondary-border-color-hover);--button-base-border-width: var(--button-secondary-border-width-hover);--button-base-border-offset: var(--button-secondary-border-offset-hover);--button-base-text-color: var(--button-secondary-text-color-hover);--button-base-icon-color: var(--button-secondary-icon-color-hover);--button-base-text-decoration: var( --button-secondary-text-decoration-hover );--icon-picto-color: var(--button-secondary-icon-color-hover)}.button--secondary:enabled:focus{--button-base-background-color: var( --button-secondary-background-color-focus );--button-base-border-color: var(--button-secondary-border-color-focus);--button-base-border-width: var(--button-secondary-border-width-focus);--button-base-border-offset: var(--button-secondary-border-offset-focus);--button-base-text-color: var(--button-secondary-text-color-focus);--button-base-icon-color: var(--button-secondary-icon-color-focus);--button-base-text-decoration: var( --button-secondary-text-decoration-focus );--icon-picto-color: var(--button-secondary-icon-color-focus)}.button--secondary:enabled:active{--button-base-background-color: var( --button-secondary-background-color-pressed );--button-base-border-color: var(--button-secondary-border-color-pressed);--button-base-border-width: var(--button-secondary-border-width-pressed);--button-base-border-offset: var( --button-secondary-border-offset-pressed );--button-base-text-color: var(--button-secondary-text-color-pressed);--button-base-icon-color: var(--button-secondary-icon-color-pressed);--button-base-text-decoration: var( --button-secondary-text-decoration-pressed );--icon-picto-color: var(--button-secondary-icon-color-pressed)}.button--secondary:disabled{--button-base-background-color: var( --button-secondary-background-color-disabled );--button-base-border-color: var(--button-secondary-border-color-disabled);--button-base-border-width: var(--button-secondary-border-width-disabled);--button-base-border-offset: var( --button-secondary-border-offset-disabled );--button-base-text-color: var(--button-secondary-text-color-disabled);--button-base-icon-color: var(--button-secondary-icon-color-disabled);--button-base-text-decoration: var( --button-secondary-text-decoration-disabled );--icon-picto-color: var(--button-secondary-icon-color-disabled)}.button--tertiary{--button-base-text-font-size: var(--button-tertiary-text-font-size);--button-base-padding: var(--button-tertiary-padding-top) var(--button-tertiary-padding-right) var(--button-tertiary-padding-bottom) var(--button-tertiary-padding-left);--button-base-background-color: var( --button-tertiary-background-color-default );--button-base-border-color: var(--button-tertiary-border-color-default);--button-base-border-width: var(--button-tertiary-border-width-default);--button-base-border-offset: var(--button-tertiary-border-offset-default);--button-base-text-color: var(--button-tertiary-text-color-default);--button-base-icon-color: var(--button-tertiary-icon-color-default);--button-base-text-decoration: var( --button-tertiary-text-decoration-default );--icon-picto-color: var(--button-tertiary-icon-color-default)}.button--tertiary:enabled:hover{--button-base-background-color: var( --button-tertiary-background-color-hover );--button-base-border-color: var(--button-tertiary-border-color-hover);--button-base-border-width: var(--button-tertiary-border-width-hover);--button-base-border-offset: var(--button-tertiary-border-offset-hover);--button-base-text-color: var(--button-tertiary-text-color-hover);--button-base-icon-color: var(--button-tertiary-icon-color-hover);--button-base-text-decoration: var( --button-tertiary-text-decoration-hover );--icon-picto-color: var(--button-tertiary-icon-color-hover)}.button--tertiary:enabled:focus{--button-base-background-color: var( --button-tertiary-background-color-focus );--button-base-border-color: var(--button-tertiary-border-color-focus);--button-base-border-width: var(--button-tertiary-border-width-focus);--button-base-border-offset: var(--button-tertiary-border-offset-focus);--button-base-text-color: var(--button-tertiary-text-color-focus);--button-base-icon-color: var(--button-tertiary-icon-color-focus);--button-base-text-decoration: var( --button-tertiary-text-decoration-focus );--icon-picto-color: var(--button-tertiary-icon-color-focus)}.button--tertiary:enabled:active{--button-base-background-color: var( --button-tertiary-background-color-pressed );--button-base-border-color: var(--button-tertiary-border-color-pressed);--button-base-border-width: var(--button-tertiary-border-width-pressed);--button-base-border-offset: var(--button-tertiary-border-offset-pressed);--button-base-text-color: var(--button-tertiary-text-color-pressed);--button-base-icon-color: var(--button-tertiary-icon-color-pressed);--button-base-text-decoration: var( --button-tertiary-text-decoration-pressed );--icon-picto-color: var(--button-tertiary-icon-color-pressed)}.button--tertiary:disabled{--button-base-background-color: var( --button-tertiary-background-color-disabled );--button-base-border-color: var(--button-tertiary-border-color-disabled);--button-base-border-width: var(--button-tertiary-border-width-disabled);--button-base-border-offset: var( --button-tertiary-border-offset-disabled );--button-base-text-color: var(--button-tertiary-text-color-disabled);--button-base-icon-color: var(--button-tertiary-icon-color-disabled);--button-base-text-decoration: var( --button-tertiary-text-decoration-disabled );--icon-picto-color: var(--button-tertiary-icon-color-disabled)}.button--destructive{--button-base-background-color: var( --button-destructive-background-color-default );--button-base-border-color: var(--button-destructive-border-color-default);--button-base-border-width: var(--button-destructive-border-width-default);--button-base-border-offset: var( --button-destructive-border-offset-default );--button-base-text-color: var(--button-destructive-text-color-default);--button-base-icon-color: var(--button-destructive-icon-color-default);--button-base-text-decoration: var( --button-destructive-text-decoration-default );--icon-picto-color: var(--button-destructive-icon-color-default)}.button--destructive:enabled:hover{--button-base-background-color: var( --button-destructive-background-color-hover );--button-base-border-color: var(--button-destructive-border-color-hover);--button-base-border-width: var(--button-destructive-border-width-hover);--button-base-border-offset: var( --button-destructive-border-offset-hover );--button-base-text-color: var(--button-destructive-text-color-hover);--button-base-icon-color: var(--button-destructive-icon-color-hover);--button-base-text-decoration: var( --button-destructive-text-decoration-hover );--icon-picto-color: var(--button-destructive-icon-color-hover)}.button--destructive:enabled:focus{--button-base-background-color: var( --button-destructive-background-color-focus );--button-base-border-color: var(--button-destructive-border-color-focus);--button-base-border-width: var(--button-destructive-border-width-focus);--button-base-border-offset: var( --button-destructive-border-offset-focus );--button-base-text-color: var(--button-destructive-text-color-focus);--button-base-icon-color: var(--button-destructive-icon-color-focus);--button-base-text-decoration: var( --button-destructive-text-decoration-focus );--icon-picto-color: var(--button-destructive-icon-color-focus)}.button--destructive:enabled:active{--button-base-background-color: var( --button-destructive-background-color-pressed );--button-base-border-color: var( --button-destructive-border-color-pressed );--button-base-border-width: var( --button-destructive-border-width-pressed );--button-base-border-offset: var( --button-destructive-border-offset-pressed );--button-base-text-color: var(--button-destructive-text-color-pressed);--button-base-icon-color: var(--button-destructive-icon-color-pressed);--button-base-text-decoration: var( --button-destructive-text-decoration-pressed );--icon-picto-color: var(--button-destructive-icon-color-pressed)}.button--destructive:disabled{--button-base-background-color: var( --button-destructive-background-color-disabled );--button-base-border-color: var( --button-destructive-border-color-disabled );--button-base-border-width: var( --button-destructive-border-width-disabled );--button-base-border-offset: var( --button-destructive-border-offset-disabled );--button-base-text-color: var(--button-destructive-text-color-disabled);--button-base-icon-color: var(--button-destructive-icon-color-disabled);--button-base-text-decoration: var( --button-destructive-text-decoration-disabled );--icon-picto-color: var(--button-destructive-icon-color-disabled)}.button--alternative{--button-base-background-color: var( --button-alternative-background-color-default );--button-base-border-color: var(--button-alternative-border-color-default);--button-base-border-width: var(--button-alternative-border-width-default);--button-base-border-offset: var( --button-alternative-border-offset-default );--button-base-text-color: var(--button-alternative-text-color-default);--button-base-icon-color: var(--button-alternative-icon-color-default);--button-base-text-decoration: var( --button-alternative-text-decoration-default );--icon-picto-color: var(--button-alternative-icon-color-default)}.button--alternative:enabled:hover{--button-base-background-color: var( --button-alternative-background-color-hover );--button-base-border-color: var(--button-alternative-border-color-hover);--button-base-border-width: var(--button-alternative-border-width-hover);--button-base-border-offset: var( --button-alternative-border-offset-hover );--button-base-text-color: var(--button-alternative-text-color-hover);--button-base-icon-color: var(--button-alternative-icon-color-hover);--button-base-text-decoration: var( --button-alternative-text-decoration-hover );--icon-picto-color: var(--button-alternative-icon-color-hover)}.button--alternative:enabled:focus{--button-base-background-color: var( --button-alternative-background-color-focus );--button-base-border-color: var(--button-alternative-border-color-focus);--button-base-border-width: var(--button-alternative-border-width-focus);--button-base-border-offset: var( --button-alternative-border-offset-focus );--button-base-text-color: var(--button-alternative-text-color-focus);--button-base-icon-color: var(--button-alternative-icon-color-focus);--button-base-text-decoration: var( --button-alternative-text-decoration-focus );--icon-picto-color: var(--button-alternative-icon-color-focus)}.button--alternative:enabled:active{--button-base-background-color: var( --button-alternative-background-color-pressed );--button-base-border-color: var( --button-alternative-border-color-pressed );--button-base-border-width: var( --button-alternative-border-width-pressed );--button-base-border-offset: var( --button-alternative-border-offset-pressed );--button-base-text-color: var(--button-alternative-text-color-pressed);--button-base-icon-color: var(--button-alternative-icon-color-pressed);--button-base-text-decoration: var( --button-alternative-text-decoration-pressed );--icon-picto-color: var(--button-alternative-icon-color-pressed)}.button--alternative:disabled{--button-base-background-color: var( --button-alternative-background-color-disabled );--button-base-border-color: var( --button-alternative-border-color-disabled );--button-base-border-width: var( --button-alternative-border-width-disabled );--button-base-border-offset: var( --button-alternative-border-offset-disabled );--button-base-text-color: var(--button-alternative-text-color-disabled);--button-base-icon-color: var(--button-alternative-icon-color-disabled);--button-base-text-decoration: var( --button-alternative-text-decoration-disabled );--icon-picto-color: var(--button-alternative-icon-color-disabled)}.icon-button{outline:var(--icon-button-base-border-width) solid var(--icon-button-base-border-color);outline-offset:var(--icon-button-base-border-offset);border:none;border-radius:var(--icon-button-base-radius);background-color:var(--icon-button-base-background-color);padding:var(--icon-button-base-padding-top) var(--icon-button-base-padding-right) var(--icon-button-base-padding-bottom) var(--icon-button-base-padding-left);width:var(--icon-button-base-width);height:var(--icon-button-base-height)}.icon-button .icon-box{background-color:var(--icon-button-base-icon-color);width:var(--icon-button-base-icon-width);height:var(--icon-button-base-icon-height)}.icon-button--small{width:var(--icon-button-small-width);height:var(--icon-button-small-height)}.icon-button--large{width:var(--icon-button-large-width);height:var(--icon-button-large-height)}.icon-button--new:after{position:absolute;top:var(--icon-button-base-notification-top);right:var(--icon-button-base-notification-right);outline:var(--icon-button-base-notification-border-width) solid var(--icon-button-base-notification-border-color);outline-offset:var(--icon-button-base-notification-border-offset);border-radius:var(--icon-button-base-notification-radius);background-color:var(--icon-button-base-notification-background-color);width:var(--icon-button-base-notification-width);height:var(--icon-button-base-notification-height);content:""}.icon-button *{filter:none}.icon-button{--icon-button-base-background-color: var( --icon-button-default-background-color-default );--icon-button-base-border-color: var( --icon-button-default-border-color-default );--icon-button-base-border-width: var( --icon-button-default-border-width-default );--icon-button-base-border-offset: var( --icon-button-default-border-offset-default );--icon-button-base-icon-color: var( --icon-button-default-icon-color-default );--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-default );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-default )}.icon-button:enabled:hover{--icon-button-base-background-color: var( --icon-button-default-background-color-hover );--icon-button-base-border-color: var( --icon-button-default-border-color-hover );--icon-button-base-border-width: var( --icon-button-default-border-width-hover );--icon-button-base-border-offset: var( --icon-button-default-border-offset-hover );--icon-button-base-icon-color: var(--icon-button-default-icon-color-hover);--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-hover );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-hover )}.icon-button:enabled:focus{--icon-button-base-background-color: var( --icon-button-default-background-color-focus );--icon-button-base-border-color: var( --icon-button-default-border-color-focus );--icon-button-base-border-width: var( --icon-button-default-border-width-focus );--icon-button-base-border-offset: var( --icon-button-default-border-offset-focus );--icon-button-base-icon-color: var(--icon-button-default-icon-color-focus);--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-focus );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-focus )}.icon-button:enabled:active{--icon-button-base-background-color: var( --icon-button-default-background-color-pressed );--icon-button-base-border-color: var( --icon-button-default-border-color-pressed );--icon-button-base-border-width: var( --icon-button-default-border-width-pressed );--icon-button-base-border-offset: var( --icon-button-default-border-offset-pressed );--icon-button-base-icon-color: var( --icon-button-default-icon-color-pressed );--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-pressed );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-pressed )}.icon-button:disabled{--icon-button-base-background-color: var( --icon-button-background-color-disabled );--icon-button-base-border-color: var( --icon-button-default-border-color-disabled );--icon-button-base-border-width: var( --icon-button-default-border-width-disabled );--icon-button-base-border-offset: var( --icon-button-default-border-offset-disabled );--icon-button-base-icon-color: var( --icon-button-default-icon-color-disabled );--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-disabled );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-disabled )}.icon-button--selected{--icon-button-base-background-color: var( --icon-button-selected-background-color-default );--icon-button-base-border-color: var( --icon-button-selected-border-color-default );--icon-button-base-border-width: var( --icon-button-selected-border-width-default );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-default );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-default );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-default );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-default )}.icon-button--selected:enabled:hover{--icon-button-base-background-color: var( --icon-button-selected-background-color-hover );--icon-button-base-border-color: var( --icon-button-selected-border-color-hover );--icon-button-base-border-width: var( --icon-button-selected-border-width-hover );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-hover );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-hover );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-hover );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-hover )}.icon-button--selected:enabled:focus{--icon-button-base-background-color: var( --icon-button-selected-background-color-focus );--icon-button-base-border-color: var( --icon-button-selected-border-color-focus );--icon-button-base-border-width: var( --icon-button-selected-border-width-focus );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-focus );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-focus );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-focus );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-focus )}.icon-button--selected:enabled:active{--icon-button-base-background-color: var( --icon-button-selected-background-color-pressed );--icon-button-base-border-color: var( --icon-button-selected-border-color-pressed );--icon-button-base-border-width: var( --icon-button-selected-border-width-pressed );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-pressed );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-pressed );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-pressed );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-pressed )}.icon-button--selected:disabled{--icon-button-base-background-color: var( --icon-button-selected-background-color-disabled );--icon-button-base-border-color: var( --icon-button-selected-border-color-disabled );--icon-button-base-border-width: var( --icon-button-selected-border-width-disabled );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-disabled );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-disabled );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-disabled );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-disabled )}
1
+ @charset "UTF-8";:root[data-theme=penpot]{--button-alternative-background-color-default: var(--penpot-color-accent-primary-muted);--button-alternative-background-color-disabled: var(--penpot-color-background-quaternary);--button-alternative-background-color-focus: var(--penpot-color-background-tertiary);--button-alternative-background-color-hover: var(--penpot-color-accent-tertiary);--button-alternative-background-color-pressed: var(--penpot-color-background-secondary);--button-alternative-border-color-default: var(--grey-transparent);--button-alternative-border-color-disabled: var(--grey-transparent);--button-alternative-border-color-focus: var(--penpot-color-accent-tertiary);--button-alternative-border-color-hover: var(--grey-transparent);--button-alternative-border-color-pressed: var(--grey-transparent);--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--penpot-color-accent-primary-default);--button-alternative-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-alternative-icon-color-focus: var(--penpot-color-accent-tertiary);--button-alternative-icon-color-hover: var(--penpot-color-foreground-primary);--button-alternative-icon-color-pressed: var(--penpot-color-accent-tertiary);--button-alternative-text-color-default: var(--penpot-color-accent-primary-default);--button-alternative-text-color-disabled: var(--penpot-color-foreground-disabled);--button-alternative-text-color-focus: var(--penpot-color-accent-tertiary);--button-alternative-text-color-hover: var(--penpot-color-foreground-primary);--button-alternative-text-color-pressed: var(--penpot-color-accent-tertiary);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: var(--grey-transparent);--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: var(--grey-transparent);--button-base-border-color: var(--grey-transparent);--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-medium);--button-base-icon-color: var(--penpot-color-background-secondary);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xxsmall);--button-base-padding-right: var(--size-pos-xxsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-xlarge);--button-base-text-color: var(--penpot-color-background-secondary);--button-base-text-decoration: none;--button-base-text-font-family: var(--text-font-family);--button-base-text-font-size: var(--font-size-small);--button-base-text-font-weight: var(--font-weight-medium);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-large);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: uppercase;--button-destructive-background-color-default: var(--penpot-color-accent-error);--button-destructive-background-color-disabled: var(--penpot-color-background-error);--button-destructive-background-color-focus: var(--penpot-color-background-tertiary);--button-destructive-background-color-hover: var(--penpot-color-foreground-error);--button-destructive-background-color-pressed: var(--penpot-color-background-secondary);--button-destructive-border-color-default: var(--grey-transparent);--button-destructive-border-color-disabled: var(--grey-transparent);--button-destructive-border-color-focus: var(--penpot-color-accent-error);--button-destructive-border-color-hover: var(--grey-transparent);--button-destructive-border-color-pressed: var(--grey-transparent);--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--penpot-color-foreground-primary);--button-destructive-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-destructive-icon-color-focus: var(--penpot-color-foreground-secondary);--button-destructive-icon-color-hover: var(--penpot-color-foreground-primary);--button-destructive-icon-color-pressed: var(--penpot-color-accent-error);--button-destructive-text-color-default: var(--penpot-color-foreground-primary);--button-destructive-text-color-disabled: var(--penpot-color-foreground-disabled);--button-destructive-text-color-focus: var(--penpot-color-foreground-secondary);--button-destructive-text-color-hover: var(--penpot-color-foreground-primary);--button-destructive-text-color-pressed: var(--penpot-color-accent-error);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: var(--grey-transparent);--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-medium);--button-large-padding-right: var(--size-pos-medium);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--penpot-color-accent-primary-default);--button-primary-background-color-disabled: var(--penpot-color-background-quaternary);--button-primary-background-color-focus: var(--penpot-color-background-tertiary);--button-primary-background-color-hover: var(--penpot-color-accent-tertiary);--button-primary-background-color-pressed: var(--penpot-color-background-secondary);--button-primary-border-color-default: var(--grey-transparent);--button-primary-border-color-disabled: var(--grey-transparent);--button-primary-border-color-focus: var(--penpot-color-accent-primary-default);--button-primary-border-color-hover: var(--grey-transparent);--button-primary-border-color-pressed: var(--grey-transparent);--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--penpot-color-background-secondary);--button-primary-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-primary-icon-color-focus: var(--penpot-color-foreground-secondary);--button-primary-icon-color-hover: var(--penpot-color-background-secondary);--button-primary-icon-color-pressed: var(--penpot-color-accent-primary-default);--button-primary-text-color-default: var(--penpot-color-background-secondary);--button-primary-text-color-disabled: var(--penpot-color-foreground-disabled);--button-primary-text-color-focus: var(--penpot-color-foreground-secondary);--button-primary-text-color-hover: var(--penpot-color-background-secondary);--button-primary-text-color-pressed: var(--penpot-color-accent-primary-default);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: var(--grey-transparent);--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--penpot-color-background-tertiary);--button-secondary-background-color-disabled: var(--penpot-color-background-quaternary);--button-secondary-background-color-focus: var(--penpot-color-background-tertiary);--button-secondary-background-color-hover: var(--penpot-color-background-quaternary);--button-secondary-background-color-pressed: var(--penpot-color-background-secondary);--button-secondary-border-color-default: var(--grey-transparent);--button-secondary-border-color-disabled: var(--grey-transparent);--button-secondary-border-color-focus: var(--penpot-color-accent-primary-default);--button-secondary-border-color-hover: var(--grey-transparent);--button-secondary-border-color-pressed: var(--penpot-color-background-quaternary);--button-secondary-border-offset-default: var(--size-null);--button-secondary-border-offset-disabled: var(--size-null);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-null);--button-secondary-border-offset-pressed: var(--size-neg-unit);--button-secondary-border-width-default: var(--size-null);--button-secondary-border-width-disabled: var(--size-null);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-null);--button-secondary-border-width-pressed: var(--size-pos-unit);--button-secondary-icon-color-default: var(--penpot-color-foreground-primary);--button-secondary-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-secondary-icon-color-focus: var(--penpot-color-foreground-secondary);--button-secondary-icon-color-hover: var(--penpot-color-accent-primary-default);--button-secondary-icon-color-pressed: var(--penpot-color-accent-primary-default);--button-secondary-text-color-default: var(--penpot-color-foreground-primary);--button-secondary-text-color-disabled: var(--penpot-color-foreground-disabled);--button-secondary-text-color-focus: var(--penpot-color-foreground-secondary);--button-secondary-text-color-hover: var(--penpot-color-accent-primary-default);--button-secondary-text-color-pressed: var(--penpot-color-accent-primary-default);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: var(--grey-transparent);--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-small);--button-tertiary-background-color-default: var(--penpot-color-background-primary);--button-tertiary-background-color-disabled: var(--penpot-color-background-primary);--button-tertiary-background-color-focus: var(--penpot-color-background-primary);--button-tertiary-background-color-hover: var(--penpot-color-background-primary);--button-tertiary-background-color-pressed: var(--penpot-color-background-primary);--button-tertiary-border-color-default: var(--grey-transparent);--button-tertiary-border-color-disabled: var(--grey-transparent);--button-tertiary-border-color-focus: var(--grey-transparent);--button-tertiary-border-color-hover: var(--grey-transparent);--button-tertiary-border-color-pressed: var(--grey-transparent);--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--penpot-color-accent-primary-default);--button-tertiary-icon-color-disabled: var(--penpot-color-foreground-disabled);--button-tertiary-icon-color-focus: var(--penpot-color-accent-primary-default);--button-tertiary-icon-color-hover: var(--penpot-color-accent-primary-default);--button-tertiary-icon-color-pressed: var(--penpot-color-accent-primary-default);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--penpot-color-accent-primary-default);--button-tertiary-text-color-disabled: var(--penpot-color-foreground-disabled);--button-tertiary-text-color-focus: var(--penpot-color-accent-primary-default);--button-tertiary-text-color-hover: var(--penpot-color-accent-primary-default);--button-tertiary-text-color-pressed: var(--penpot-color-accent-primary-default);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: var(--grey-transparent);--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-small);--icon-button-base-background-color: var(--grey-transparent);--icon-button-base-border-color: var(--grey-transparent);--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-medium);--icon-button-base-icon-color: var(--penpot-color-background-secondary);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xxxsmall);--icon-button-base-notification-top: var(--size-pos-xxxsmall);--icon-button-base-notification-width: var(--size-pos-xxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-xlarge);--icon-button-base-text-color: var(--penpot-color-background-secondary);--icon-button-base-width: var(--size-pos-medium);--icon-button-default-background-color-default: var(--penpot-color-background-primary);--icon-button-default-background-color-disabled: var(--penpot-color-background-quaternary);--icon-button-default-background-color-focus: var(--penpot-color-background-tertiary);--icon-button-default-background-color-hover: var(--penpot-color-background-tertiary);--icon-button-default-background-color-onselected: var(--penpot-color-accent-primary-muted);--icon-button-default-background-color-onselected-disabled: var(--penpot-color-accent-primary-muted);--icon-button-default-background-color-onselected-hover: var(--penpot-color-accent-primary-muted);--icon-button-default-background-color-pressed: var(--penpot-color-background-secondary);--icon-button-default-border-color-default: var(--grey-transparent);--icon-button-default-border-color-disabled: var(--grey-transparent);--icon-button-default-border-color-focus: var(--penpot-color-accent-primary-default);--icon-button-default-border-color-hover: var(--grey-transparent);--icon-button-default-border-color-pressed: var(--grey-transparent);--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--penpot-color-icon-default);--icon-button-default-icon-color-disabled: var(--penpot-color-foreground-disabled);--icon-button-default-icon-color-focus: var(--penpot-color-foreground-primary);--icon-button-default-icon-color-hover: var(--penpot-color-accent-primary-default);--icon-button-default-icon-color-pressed: var(--penpot-color-accent-primary-default);--icon-button-default-notification-background-color-default: var(--penpot-color-accent-primary-default);--icon-button-default-notification-background-color-disabled: var(--penpot-color-accent-primary-muted);--icon-button-default-notification-background-color-focus: var(--penpot-color-accent-primary-default);--icon-button-default-notification-background-color-hover: var(--penpot-color-accent-primary-default);--icon-button-default-notification-background-color-pressed: var(--penpot-color-accent-primary-default);--icon-button-default-notification-border-color-default: var(--penpot-color-background-primary);--icon-button-default-notification-border-color-disabled: var(--penpot-color-background-quaternary);--icon-button-default-notification-border-color-focus: var(--penpot-color-background-tertiary);--icon-button-default-notification-border-color-hover: var(--penpot-color-background-tertiary);--icon-button-default-notification-border-color-pressed: var(--penpot-color-background-secondary);--icon-button-large-height: var(--size-pos-medium);--icon-button-large-width: var(--size-pos-medium);--icon-button-selected-background-color-default: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-disabled: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-focus: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-hover: var(--penpot-color-background-tertiary);--icon-button-selected-background-color-pressed: var(--penpot-color-background-tertiary);--icon-button-selected-border-color-default: var(--grey-transparent);--icon-button-selected-border-color-disabled: var(--grey-transparent);--icon-button-selected-border-color-focus: var(--penpot-color-accent-primary-default);--icon-button-selected-border-color-hover: var(--grey-transparent);--icon-button-selected-border-color-pressed: var(--grey-transparent);--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--penpot-color-accent-primary-default);--icon-button-selected-icon-color-disabled: var(--penpot-color-accent-primary-muted);--icon-button-selected-icon-color-focus: var(--penpot-color-accent-primary-default);--icon-button-selected-icon-color-hover: var(--penpot-color-accent-primary-default);--icon-button-selected-icon-color-pressed: var(--penpot-color-accent-primary-default);--icon-button-selected-notification-background-color-default: var(--penpot-color-accent-primary-default);--icon-button-selected-notification-background-color-disabled: var(--penpot-color-accent-primary-muted);--icon-button-selected-notification-background-color-focus: var(--penpot-color-accent-primary-default);--icon-button-selected-notification-background-color-hover: var(--penpot-color-accent-primary-default);--icon-button-selected-notification-background-color-pressed: var(--penpot-color-accent-primary-default);--icon-button-selected-notification-border-color-default: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-disabled: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-focus: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-hover: var(--penpot-color-background-tertiary);--icon-button-selected-notification-border-color-pressed: var(--penpot-color-background-tertiary);--icon-button-small-height: var(--size-pos-msmall);--icon-button-small-width: var(--size-pos-msmall)}:root[data-theme=sketch]{--button-alternative-background-color-default: var(--sketch-color-accent-disabled);--button-alternative-background-color-disabled: var(--sketch-color-accent-disabled);--button-alternative-background-color-focus: var(--sketch-color-accent-disabled);--button-alternative-background-color-hover: var(--sketch-color-accent-tertiary);--button-alternative-background-color-pressed: var(--sketch-color-accent-tertiary);--button-alternative-border-color-default: var(--grey-transparent);--button-alternative-border-color-disabled: var(--grey-transparent);--button-alternative-border-color-focus: var(--sketch-color-accent-primary);--button-alternative-border-color-hover: var(--grey-transparent);--button-alternative-border-color-pressed: var(--grey-transparent);--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--sketch-color-accent-primary);--button-alternative-icon-color-disabled: var(--sketch-color-accent-tertiary);--button-alternative-icon-color-focus: var(--sketch-color-accent-primary);--button-alternative-icon-color-hover: var(--sketch-color-accent-primary);--button-alternative-icon-color-pressed: var(--sketch-color-accent-primary);--button-alternative-text-color-default: var(--sketch-color-accent-primary);--button-alternative-text-color-disabled: var(--sketch-color-accent-tertiary);--button-alternative-text-color-focus: var(--sketch-color-accent-primary);--button-alternative-text-color-hover: var(--sketch-color-accent-primary);--button-alternative-text-color-pressed: var(--sketch-color-accent-primary);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: var(--grey-transparent);--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: var(--grey-transparent);--button-base-border-color: var(--grey-transparent);--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-medium);--button-base-icon-color: var(--sketch-color-foreground-primary);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xmsmall);--button-base-padding-right: var(--size-pos-xmsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-large);--button-base-text-color: var(--sketch-color-foreground-primary);--button-base-text-decoration: none;--button-base-text-font-family: var(--text-font-family);--button-base-text-font-size: var(--font-size-medium);--button-base-text-font-weight: var(--font-weight-bold);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-small);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: none;--button-destructive-background-color-default: var(--sketch-color-accent-error);--button-destructive-background-color-disabled: var(--sketch-color-background-error);--button-destructive-background-color-focus: var(--sketch-color-accent-error);--button-destructive-background-color-hover: var(--sketch-color-foreground-error);--button-destructive-background-color-pressed: var(--sketch-color-foreground-error);--button-destructive-border-color-default: var(--grey-transparent);--button-destructive-border-color-disabled: var(--grey-transparent);--button-destructive-border-color-focus: var(--sketch-color-border-tertiary);--button-destructive-border-color-hover: var(--grey-transparent);--button-destructive-border-color-pressed: var(--grey-transparent);--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--sketch-color-foreground-onaccent-default);--button-destructive-icon-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-destructive-icon-color-focus: var(--sketch-color-foreground-onaccent-default);--button-destructive-icon-color-hover: var(--sketch-color-foreground-onaccent-default);--button-destructive-icon-color-pressed: var(--sketch-color-foreground-onaccent-default);--button-destructive-text-color-default: var(--sketch-color-foreground-onaccent-default);--button-destructive-text-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-destructive-text-color-focus: var(--sketch-color-foreground-onaccent-default);--button-destructive-text-color-hover: var(--sketch-color-foreground-onaccent-default);--button-destructive-text-color-pressed: var(--sketch-color-foreground-onaccent-default);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: var(--grey-transparent);--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-small);--button-large-padding-right: var(--size-pos-small);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--sketch-color-accent-secondary);--button-primary-background-color-disabled: var(--sketch-color-accent-tertiary);--button-primary-background-color-focus: var(--sketch-color-accent-secondary);--button-primary-background-color-hover: var(--sketch-color-accent-primary);--button-primary-background-color-pressed: var(--sketch-color-accent-primary);--button-primary-border-color-default: var(--grey-transparent);--button-primary-border-color-disabled: var(--grey-transparent);--button-primary-border-color-focus: var(--sketch-color-accent-tertiary);--button-primary-border-color-hover: var(--grey-transparent);--button-primary-border-color-pressed: var(--grey-transparent);--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--sketch-color-foreground-onaccent-default);--button-primary-icon-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-primary-icon-color-focus: var(--sketch-color-foreground-onaccent-default);--button-primary-icon-color-hover: var(--sketch-color-foreground-onaccent-default);--button-primary-icon-color-pressed: var(--sketch-color-foreground-onaccent-default);--button-primary-text-color-default: var(--sketch-color-foreground-onaccent-default);--button-primary-text-color-disabled: var(--sketch-color-foreground-onaccent-disabled);--button-primary-text-color-focus: var(--sketch-color-foreground-onaccent-default);--button-primary-text-color-hover: var(--sketch-color-foreground-onaccent-default);--button-primary-text-color-pressed: var(--sketch-color-foreground-onaccent-default);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: var(--grey-transparent);--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--sketch-color-background-primary);--button-secondary-background-color-disabled: var(--sketch-color-background-secondary);--button-secondary-background-color-focus: var(--sketch-color-background-primary);--button-secondary-background-color-hover: var(--sketch-color-background-secondary);--button-secondary-background-color-pressed: var(--sketch-color-background-secondary);--button-secondary-border-color-default: var(--sketch-color-border-primary);--button-secondary-border-color-disabled: var(--sketch-color-border-disabled);--button-secondary-border-color-focus: var(--sketch-color-accent-primary);--button-secondary-border-color-hover: var(--sketch-color-border-primary);--button-secondary-border-color-pressed: var(--sketch-color-border-primary);--button-secondary-border-offset-default: var(--size-neg-unit);--button-secondary-border-offset-disabled: var(--size-neg-unit);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-neg-unit);--button-secondary-border-offset-pressed: var(--size-neg-unit);--button-secondary-border-width-default: var(--size-pos-unit);--button-secondary-border-width-disabled: var(--size-pos-unit);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-pos-unit);--button-secondary-border-width-pressed: var(--size-pos-unit);--button-secondary-icon-color-default: var(--sketch-color-foreground-tertiary);--button-secondary-icon-color-disabled: var(--sketch-color-foreground-disabled);--button-secondary-icon-color-focus: var(--sketch-color-foreground-tertiary);--button-secondary-icon-color-hover: var(--sketch-color-foreground-tertiary);--button-secondary-icon-color-pressed: var(--sketch-color-foreground-tertiary);--button-secondary-text-color-default: var(--sketch-color-foreground-primary);--button-secondary-text-color-disabled: var(--sketch-color-foreground-disabled);--button-secondary-text-color-focus: var(--sketch-color-foreground-primary);--button-secondary-text-color-hover: var(--sketch-color-foreground-primary);--button-secondary-text-color-pressed: var(--sketch-color-foreground-primary);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: var(--grey-transparent);--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-small);--button-tertiary-background-color-default: var(--sketch-color-background-primary);--button-tertiary-background-color-disabled: var(--sketch-color-background-primary);--button-tertiary-background-color-focus: var(--sketch-color-background-primary);--button-tertiary-background-color-hover: var(--sketch-color-background-primary);--button-tertiary-background-color-pressed: var(--sketch-color-background-primary);--button-tertiary-border-color-default: var(--grey-transparent);--button-tertiary-border-color-disabled: var(--grey-transparent);--button-tertiary-border-color-focus: var(--grey-transparent);--button-tertiary-border-color-hover: var(--grey-transparent);--button-tertiary-border-color-pressed: var(--grey-transparent);--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--sketch-color-accent-primary);--button-tertiary-icon-color-disabled: var(--sketch-color-accent-disabled);--button-tertiary-icon-color-focus: var(--sketch-color-accent-primary);--button-tertiary-icon-color-hover: var(--sketch-color-accent-primary);--button-tertiary-icon-color-pressed: var(--sketch-color-accent-primary);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--sketch-color-accent-primary);--button-tertiary-text-color-disabled: var(--sketch-color-accent-tertiary);--button-tertiary-text-color-focus: var(--sketch-color-accent-primary);--button-tertiary-text-color-hover: var(--sketch-color-accent-primary);--button-tertiary-text-color-pressed: var(--sketch-color-accent-primary);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: var(--grey-transparent);--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-medium);--icon-button-base-background-color: var(--grey-transparent);--icon-button-base-border-color: var(--grey-transparent);--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-medium);--icon-button-base-icon-color: var(--sketch-color-background-secondary);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xxxsmall);--icon-button-base-notification-top: var(--size-pos-xxxsmall);--icon-button-base-notification-width: var(--size-pos-xxxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-large);--icon-button-base-text-color: var(--sketch-color-background-secondary);--icon-button-base-width: var(--size-pos-large);--icon-button-default-background-color-default: var(--sketch-color-background-primary);--icon-button-default-background-color-disabled: var(--sketch-color-background-primary);--icon-button-default-background-color-focus: var(--sketch-color-background-primary);--icon-button-default-background-color-hover: var(--sketch-color-background-secondary);--icon-button-default-background-color-onselected: var(--sketch-color-accent-tertiary);--icon-button-default-background-color-onselected-disabled: var(--sketch-color-accent-disabled);--icon-button-default-background-color-onselected-hover: var(--sketch-color-accent-tertiary);--icon-button-default-background-color-pressed: var(--sketch-color-background-secondary);--icon-button-default-border-color-default: var(--grey-transparent);--icon-button-default-border-color-disabled: var(--grey-transparent);--icon-button-default-border-color-focus: var(--sketch-color-accent-primary);--icon-button-default-border-color-hover: var(--grey-transparent);--icon-button-default-border-color-pressed: var(--grey-transparent);--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--sketch-color-foreground-tertiary);--icon-button-default-icon-color-disabled: var(--sketch-color-foreground-disabled);--icon-button-default-icon-color-focus: var(--sketch-color-foreground-primary);--icon-button-default-icon-color-hover: var(--sketch-color-foreground-primary);--icon-button-default-icon-color-pressed: var(--sketch-color-foreground-primary);--icon-button-default-notification-background-color-default: var(--sketch-color-accent-primary);--icon-button-default-notification-background-color-disabled: var(--sketch-color-accent-tertiary);--icon-button-default-notification-background-color-focus: var(--sketch-color-accent-primary);--icon-button-default-notification-background-color-hover: var(--sketch-color-accent-primary);--icon-button-default-notification-background-color-pressed: var(--sketch-color-accent-primary);--icon-button-default-notification-border-color-default: var(--sketch-color-background-primary);--icon-button-default-notification-border-color-disabled: var(--sketch-color-background-secondary);--icon-button-default-notification-border-color-focus: var(--sketch-color-background-primary);--icon-button-default-notification-border-color-hover: var(--sketch-color-background-tertiary);--icon-button-default-notification-border-color-pressed: var(--sketch-color-background-tertiary);--icon-button-large-height: var(--size-pos-large);--icon-button-large-width: var(--size-pos-xlarge);--icon-button-selected-background-color-default: var(--sketch-color-accent-disabled);--icon-button-selected-background-color-disabled: var(--sketch-color-accent-disabled);--icon-button-selected-background-color-focus: var(--sketch-color-accent-disabled);--icon-button-selected-background-color-hover: var(--sketch-color-accent-tertiary);--icon-button-selected-background-color-pressed: var(--sketch-color-accent-tertiary);--icon-button-selected-border-color-default: var(--grey-transparent);--icon-button-selected-border-color-disabled: var(--grey-transparent);--icon-button-selected-border-color-focus: var(--sketch-color-accent-primary);--icon-button-selected-border-color-hover: var(--grey-transparent);--icon-button-selected-border-color-pressed: var(--grey-transparent);--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--sketch-color-accent-primary);--icon-button-selected-icon-color-disabled: var(--sketch-color-accent-tertiary);--icon-button-selected-icon-color-focus: var(--sketch-color-accent-primary);--icon-button-selected-icon-color-hover: var(--sketch-color-accent-primary);--icon-button-selected-icon-color-pressed: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-default: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-disabled: var(--sketch-color-accent-tertiary);--icon-button-selected-notification-background-color-focus: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-hover: var(--sketch-color-accent-primary);--icon-button-selected-notification-background-color-pressed: var(--sketch-color-accent-primary);--icon-button-selected-notification-border-color-default: var(--sketch-color-accent-disabled);--icon-button-selected-notification-border-color-disabled: var(--sketch-color-accent-disabled);--icon-button-selected-notification-border-color-focus: var(--sketch-color-accent-disabled);--icon-button-selected-notification-border-color-hover: var(--sketch-color-accent-tertiary);--icon-button-selected-notification-border-color-pressed: var(--sketch-color-accent-tertiary);--icon-button-small-height: var(--size-pos-small);--icon-button-small-width: var(--size-pos-medium)}:root[data-theme=figma]{--button-alternative-background-color-default: var(--figma-color-bg-component-default);--button-alternative-background-color-disabled: var(--figma-color-bg-disabled-default);--button-alternative-background-color-focus: var(--figma-color-bg-component-default);--button-alternative-background-color-hover: var(--figma-color-bg-component-default);--button-alternative-background-color-pressed: var(--figma-color-bg-component-pressed);--button-alternative-border-color-default: var(--grey-transparent);--button-alternative-border-color-disabled: var(--grey-transparent);--button-alternative-border-color-focus: var(--figma-color-border-oncomponent-strong);--button-alternative-border-color-hover: var(--grey-transparent);--button-alternative-border-color-pressed: var(--grey-transparent);--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--figma-color-icon-oncomponent-default);--button-alternative-icon-color-disabled: var(--figma-color-icon-ondisabled);--button-alternative-icon-color-focus: var(--figma-color-icon-oncomponent-default);--button-alternative-icon-color-hover: var(--figma-color-icon-oncomponent-default);--button-alternative-icon-color-pressed: var(--figma-color-icon-oncomponent-default);--button-alternative-text-color-default: var(--figma-color-text-oncomponent-default);--button-alternative-text-color-disabled: var(--figma-color-text-ondisabled);--button-alternative-text-color-focus: var(--figma-color-text-oncomponent-default);--button-alternative-text-color-hover: var(--figma-color-text-oncomponent-default);--button-alternative-text-color-pressed: var(--figma-color-text-oncomponent-default);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: var(--grey-transparent);--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: var(--grey-transparent);--button-base-border-color: var(--grey-transparent);--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-small);--button-base-icon-color: var(--figma-color-icon-default);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xxsmall);--button-base-padding-right: var(--size-pos-xxsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-medium);--button-base-text-color: var(--figma-color-text-default);--button-base-text-decoration: none;--button-base-text-font-family: var(--text-font-family);--button-base-text-font-size: var(--font-size-xsmall);--button-base-text-font-weight: var(--font-weight-accent);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: none;--button-destructive-background-color-default: var(--figma-color-bg-danger-default);--button-destructive-background-color-disabled: var(--figma-color-bg-disabled-default);--button-destructive-background-color-focus: var(--figma-color-bg-danger-default);--button-destructive-background-color-hover: var(--figma-color-bg-danger-default);--button-destructive-background-color-pressed: var(--figma-color-bg-danger-pressed);--button-destructive-border-color-default: var(--grey-transparent);--button-destructive-border-color-disabled: var(--grey-transparent);--button-destructive-border-color-focus: var(--figma-color-border-ondanger-strong);--button-destructive-border-color-hover: var(--grey-transparent);--button-destructive-border-color-pressed: var(--grey-transparent);--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--figma-color-icon-ondanger-default);--button-destructive-icon-color-disabled: var(--figma-color-icon-ondisabled);--button-destructive-icon-color-focus: var(--figma-color-icon-ondanger-default);--button-destructive-icon-color-hover: var(--figma-color-icon-ondanger-default);--button-destructive-icon-color-pressed: var(--figma-color-icon-ondanger-default);--button-destructive-text-color-default: var(--figma-color-text-ondanger-default);--button-destructive-text-color-disabled: var(--figma-color-text-ondisabled);--button-destructive-text-color-focus: var(--figma-color-text-ondanger-default);--button-destructive-text-color-hover: var(--figma-color-text-ondanger-default);--button-destructive-text-color-pressed: var(--figma-color-text-ondanger-default);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: var(--grey-transparent);--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-medium);--button-large-padding-right: var(--size-pos-medium);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--figma-color-bg-brand-default);--button-primary-background-color-disabled: var(--figma-color-bg-disabled-default);--button-primary-background-color-focus: var(--figma-color-bg-brand-default);--button-primary-background-color-hover: var(--figma-color-bg-brand-default);--button-primary-background-color-pressed: var(--figma-color-bg-brand-pressed);--button-primary-border-color-default: var(--grey-transparent);--button-primary-border-color-disabled: var(--grey-transparent);--button-primary-border-color-focus: var(--figma-color-border-onbrand-strong);--button-primary-border-color-hover: var(--grey-transparent);--button-primary-border-color-pressed: var(--grey-transparent);--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--figma-color-icon-onbrand-default);--button-primary-icon-color-disabled: var(--figma-color-icon-ondisabled);--button-primary-icon-color-focus: var(--figma-color-icon-onbrand-default);--button-primary-icon-color-hover: var(--figma-color-icon-onbrand-default);--button-primary-icon-color-pressed: var(--figma-color-icon-onbrand-default);--button-primary-text-color-default: var(--figma-color-text-onbrand-default);--button-primary-text-color-disabled: var(--figma-color-text-ondisabled);--button-primary-text-color-focus: var(--figma-color-text-onbrand-default);--button-primary-text-color-hover: var(--figma-color-text-onbrand-default);--button-primary-text-color-pressed: var(--figma-color-text-onbrand-default);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: var(--grey-transparent);--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--figma-color-bg-default);--button-secondary-background-color-disabled: var(--figma-color-bg-default);--button-secondary-background-color-focus: var(--figma-color-bg-default);--button-secondary-background-color-hover: var(--figma-color-bg-default);--button-secondary-background-color-pressed: var(--figma-color-bg-pressed);--button-secondary-border-color-default: var(--figma-color-border-disabled-default);--button-secondary-border-color-disabled: var(--figma-color-border-disabled-default);--button-secondary-border-color-focus: var(--figma-color-border-selected-default);--button-secondary-border-color-hover: var(--figma-color-border-disabled-default);--button-secondary-border-color-pressed: var(--figma-color-border-disabled-default);--button-secondary-border-offset-default: var(--size-neg-unit);--button-secondary-border-offset-disabled: var(--size-neg-unit);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-neg-unit);--button-secondary-border-offset-pressed: var(--size-neg-unit);--button-secondary-border-width-default: var(--size-pos-unit);--button-secondary-border-width-disabled: var(--size-pos-unit);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-pos-unit);--button-secondary-border-width-pressed: var(--size-pos-unit);--button-secondary-icon-color-default: var(--figma-color-icon-default);--button-secondary-icon-color-disabled: var(--figma-color-icon-disabled);--button-secondary-icon-color-focus: var(--figma-color-icon-default);--button-secondary-icon-color-hover: var(--figma-color-icon-default);--button-secondary-icon-color-pressed: var(--figma-color-icon-default);--button-secondary-text-color-default: var(--figma-color-text-default);--button-secondary-text-color-disabled: var(--figma-color-text-disabled);--button-secondary-text-color-focus: var(--figma-color-text-default);--button-secondary-text-color-hover: var(--figma-color-text-default);--button-secondary-text-color-pressed: var(--figma-color-text-default);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: var(--grey-transparent);--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-small);--button-tertiary-background-color-default: var(--figma-color-bg-default);--button-tertiary-background-color-disabled: var(--figma-color-bg-default);--button-tertiary-background-color-focus: var(--figma-color-bg-default);--button-tertiary-background-color-hover: var(--figma-color-bg-default);--button-tertiary-background-color-pressed: var(--figma-color-bg-default);--button-tertiary-border-color-default: var(--grey-transparent);--button-tertiary-border-color-disabled: var(--grey-transparent);--button-tertiary-border-color-focus: var(--grey-transparent);--button-tertiary-border-color-hover: var(--grey-transparent);--button-tertiary-border-color-pressed: var(--grey-transparent);--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--figma-color-icon-brand-default);--button-tertiary-icon-color-disabled: var(--figma-color-icon-disabled);--button-tertiary-icon-color-focus: var(--figma-color-icon-brand-default);--button-tertiary-icon-color-hover: var(--figma-color-icon-brand-default);--button-tertiary-icon-color-pressed: var(--figma-color-icon-brand-default);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--figma-color-text-brand-default);--button-tertiary-text-color-disabled: var(--figma-color-text-disabled);--button-tertiary-text-color-focus: var(--figma-color-text-brand-default);--button-tertiary-text-color-hover: var(--figma-color-text-brand-default);--button-tertiary-text-color-pressed: var(--figma-color-text-brand-default);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: var(--grey-transparent);--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-xsmall);--icon-button-base-background-color: var(--grey-transparent);--icon-button-base-border-color: var(--grey-transparent);--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-small);--icon-button-base-icon-color: var(--figma-color-icon-default);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xunit);--icon-button-base-notification-top: var(--size-pos-xunit);--icon-button-base-notification-width: var(--size-pos-xxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-medium);--icon-button-base-text-color: var(--figma-color-text-default);--icon-button-base-width: var(--size-pos-small);--icon-button-default-background-color-default: var(--figma-color-bg-default);--icon-button-default-background-color-disabled: var(--figma-color-bg-default);--icon-button-default-background-color-focus: var(--figma-color-bg-default);--icon-button-default-background-color-hover: var(--figma-color-bg-hover);--icon-button-default-background-color-onselected: var(--figma-color-bg-selected-default);--icon-button-default-background-color-onselected-disabled: var(--figma-color-bg-brand-tertiary);--icon-button-default-background-color-onselected-hover: var(--figma-color-bg-selected-hover);--icon-button-default-background-color-pressed: var(--figma-color-bg-pressed);--icon-button-default-border-color-default: var(--grey-transparent);--icon-button-default-border-color-disabled: var(--grey-transparent);--icon-button-default-border-color-focus: var(--figma-color-border-selected-default);--icon-button-default-border-color-hover: var(--grey-transparent);--icon-button-default-border-color-pressed: var(--grey-transparent);--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--figma-color-icon-default);--icon-button-default-icon-color-disabled: var(--figma-color-icon-disabled);--icon-button-default-icon-color-focus: var(--figma-color-icon-default);--icon-button-default-icon-color-hover: var(--figma-color-icon-default);--icon-button-default-icon-color-pressed: var(--figma-color-icon-default);--icon-button-default-notification-background-color-default: var(--figma-color-bg-brand-default);--icon-button-default-notification-background-color-disabled: var(--figma-color-bg-brand-secondary);--icon-button-default-notification-background-color-focus: var(--figma-color-bg-brand-default);--icon-button-default-notification-background-color-hover: var(--figma-color-bg-brand-default);--icon-button-default-notification-background-color-pressed: var(--figma-color-bg-brand-default);--icon-button-default-notification-border-color-default: var(--figma-color-bg-default);--icon-button-default-notification-border-color-disabled: var(--figma-color-bg-default);--icon-button-default-notification-border-color-focus: var(--figma-color-bg-default);--icon-button-default-notification-border-color-hover: var(--figma-color-bg-hover);--icon-button-default-notification-border-color-pressed: var(--figma-color-bg-pressed);--icon-button-large-height: var(--size-pos-medium);--icon-button-large-width: var(--size-pos-medium);--icon-button-selected-background-color-default: var(--figma-color-bg-selected-default);--icon-button-selected-background-color-disabled: var(--figma-color-bg-brand-tertiary);--icon-button-selected-background-color-focus: var(--figma-color-bg-selected-default);--icon-button-selected-background-color-hover: var(--figma-color-bg-selected-hover);--icon-button-selected-background-color-pressed: var(--figma-color-bg-selected-pressed);--icon-button-selected-border-color-default: var(--grey-transparent);--icon-button-selected-border-color-disabled: var(--grey-transparent);--icon-button-selected-border-color-focus: var(--figma-color-border-selected-default);--icon-button-selected-border-color-hover: var(--grey-transparent);--icon-button-selected-border-color-pressed: var(--grey-transparent);--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--figma-color-icon-brand-default);--icon-button-selected-icon-color-disabled: var(--figma-color-icon-brand-secondary);--icon-button-selected-icon-color-focus: var(--figma-color-icon-brand-default);--icon-button-selected-icon-color-hover: var(--figma-color-icon-brand-default);--icon-button-selected-icon-color-pressed: var(--figma-color-icon-brand-default);--icon-button-selected-notification-background-color-default: var(--figma-color-bg-brand-default);--icon-button-selected-notification-background-color-disabled: var(--figma-color-bg-brand-secondary);--icon-button-selected-notification-background-color-focus: var(--figma-color-bg-brand-default);--icon-button-selected-notification-background-color-hover: var(--figma-color-bg-brand-default);--icon-button-selected-notification-background-color-pressed: var(--figma-color-bg-brand-default);--icon-button-selected-notification-border-color-default: var(--figma-color-bg-selected-default);--icon-button-selected-notification-border-color-disabled: var(--figma-color-bg-selected-default);--icon-button-selected-notification-border-color-focus: var(--figma-color-bg-selected-default);--icon-button-selected-notification-border-color-hover: var(--figma-color-bg-tertiary);--icon-button-selected-notification-border-color-pressed: var(--figma-color-bg-brand-tertiary);--icon-button-small-height: var(--size-pos-msmall);--icon-button-small-width: var(--size-pos-msmall)}:root[data-theme=framer]{--button-alternative-background-color-default: var(--framer-color-tint-dimmed);--button-alternative-background-color-disabled: var(--framer-color-bg-tertiary);--button-alternative-background-color-focus: var(--framer-color-tint-dimmed);--button-alternative-background-color-hover: var(--framer-color-tint-default);--button-alternative-background-color-pressed: var(--framer-color-tint-dimmed);--button-alternative-border-color-default: var(--grey-transparent);--button-alternative-border-color-disabled: var(--grey-transparent);--button-alternative-border-color-focus: var(--framer-color-tint-default);--button-alternative-border-color-hover: var(--grey-transparent);--button-alternative-border-color-pressed: var(--grey-transparent);--button-alternative-border-offset-default: var(--size-null);--button-alternative-border-offset-disabled: var(--size-null);--button-alternative-border-offset-focus: var(--size-neg-unit);--button-alternative-border-offset-hover: var(--size-null);--button-alternative-border-offset-pressed: var(--size-null);--button-alternative-border-width-default: var(--size-null);--button-alternative-border-width-disabled: var(--size-null);--button-alternative-border-width-focus: var(--size-pos-unit);--button-alternative-border-width-hover: var(--size-null);--button-alternative-border-width-pressed: var(--size-null);--button-alternative-icon-color-default: var(--framer-color-tint-default);--button-alternative-icon-color-disabled: var(--framer-color-text-tertiary);--button-alternative-icon-color-focus: var(--framer-color-tint-default);--button-alternative-icon-color-hover: var(--framer-color-text-reversed);--button-alternative-icon-color-pressed: var(--framer-color-tint-default);--button-alternative-text-color-default: var(--framer-color-tint-default);--button-alternative-text-color-disabled: var(--framer-color-text-tertiary);--button-alternative-text-color-focus: var(--framer-color-tint-default);--button-alternative-text-color-hover: var(--framer-color-text-reversed);--button-alternative-text-color-pressed: var(--framer-color-tint-default);--button-alternative-text-decoration-default: none;--button-alternative-text-decoration-disabled: var(--grey-transparent);--button-alternative-text-decoration-focus: none;--button-alternative-text-decoration-hover: none;--button-alternative-text-decoration-pressed: none;--button-base-background-color: var(--grey-transparent);--button-base-border-color: var(--grey-transparent);--button-base-border-offset: var(--size-null);--button-base-border-width: var(--size-null);--button-base-caret-height: var(--size-pos-small);--button-base-caret-width: var(--size-pos-xsmall);--button-base-gap: var(--size-pos-xxxsmall);--button-base-height: var(--size-pos-medium);--button-base-icon-color: var(--framer-color-text-default);--button-base-icon-height: var(--size-pos-small);--button-base-icon-width: var(--size-pos-small);--button-base-padding-bottom: var(--size-null);--button-base-padding-left: var(--size-pos-xmsmall);--button-base-padding-right: var(--size-pos-xmsmall);--button-base-padding-top: var(--size-null);--button-base-radius: var(--border-radius-xlarge);--button-base-text-color: var(--framer-color-text-default);--button-base-text-decoration: none;--button-base-text-font-family: var(--text-font-family);--button-base-text-font-size: var(--font-size-small);--button-base-text-font-weight: var(--font-weight-bold);--button-base-text-letter-spacing: var(--font-letter-spacing-pos-large);--button-base-text-line-height: var(--font-line-height-default);--button-base-text-transform: none;--button-destructive-background-color-default: var(--framer-color-destructive-default);--button-destructive-background-color-disabled: var(--framer-color-bg-tertiary);--button-destructive-background-color-focus: var(--framer-color-destructive-dark);--button-destructive-background-color-hover: var(--framer-color-destructive-dark);--button-destructive-background-color-pressed: var(--framer-color-destructive-default);--button-destructive-border-color-default: var(--grey-transparent);--button-destructive-border-color-disabled: var(--grey-transparent);--button-destructive-border-color-focus: var(--framer-color-destructive-extra-dark);--button-destructive-border-color-hover: var(--grey-transparent);--button-destructive-border-color-pressed: var(--grey-transparent);--button-destructive-border-offset-default: var(--size-null);--button-destructive-border-offset-disabled: var(--size-null);--button-destructive-border-offset-focus: var(--size-neg-unit);--button-destructive-border-offset-hover: var(--size-null);--button-destructive-border-offset-pressed: var(--size-null);--button-destructive-border-width-default: var(--size-null);--button-destructive-border-width-disabled: var(--size-null);--button-destructive-border-width-focus: var(--size-pos-unit);--button-destructive-border-width-hover: var(--size-null);--button-destructive-border-width-pressed: var(--size-null);--button-destructive-icon-color-default: var(--framer-color-text-reversed);--button-destructive-icon-color-disabled: var(--framer-color-text-tertiary);--button-destructive-icon-color-focus: var(--framer-color-text-reversed);--button-destructive-icon-color-hover: var(--framer-color-text-reversed);--button-destructive-icon-color-pressed: var(--framer-color-text-reversed);--button-destructive-text-color-default: var(--framer-color-text-reversed);--button-destructive-text-color-disabled: var(--framer-color-text-tertiary);--button-destructive-text-color-focus: var(--framer-color-text-reversed);--button-destructive-text-color-hover: var(--framer-color-text-reversed);--button-destructive-text-color-pressed: var(--framer-color-text-reversed);--button-destructive-text-decoration-default: none;--button-destructive-text-decoration-disabled: var(--grey-transparent);--button-destructive-text-decoration-focus: none;--button-destructive-text-decoration-hover: none;--button-destructive-text-decoration-pressed: none;--button-large-height: var(--size-pos-large);--button-large-padding-bottom: var(--size-null);--button-large-padding-left: var(--size-pos-medium);--button-large-padding-right: var(--size-pos-medium);--button-large-padding-top: var(--size-null);--button-primary-background-color-default: var(--framer-color-tint-default);--button-primary-background-color-disabled: var(--framer-color-bg-tertiary);--button-primary-background-color-focus: var(--framer-color-tint-dark);--button-primary-background-color-hover: var(--framer-color-tint-dark);--button-primary-background-color-pressed: var(--framer-color-tint-default);--button-primary-border-color-default: var(--grey-transparent);--button-primary-border-color-disabled: var(--grey-transparent);--button-primary-border-color-focus: var(--framer-color-tint-extra-dark);--button-primary-border-color-hover: var(--grey-transparent);--button-primary-border-color-pressed: var(--grey-transparent);--button-primary-border-offset-default: var(--size-null);--button-primary-border-offset-disabled: var(--size-null);--button-primary-border-offset-focus: var(--size-neg-unit);--button-primary-border-offset-hover: var(--size-null);--button-primary-border-offset-pressed: var(--size-null);--button-primary-border-width-default: var(--size-null);--button-primary-border-width-disabled: var(--size-null);--button-primary-border-width-focus: var(--size-pos-unit);--button-primary-border-width-hover: var(--size-null);--button-primary-border-width-pressed: var(--size-null);--button-primary-icon-color-default: var(--framer-color-text-reversed);--button-primary-icon-color-disabled: var(--framer-color-text-tertiary);--button-primary-icon-color-focus: var(--framer-color-text-reversed);--button-primary-icon-color-hover: var(--framer-color-text-reversed);--button-primary-icon-color-pressed: var(--framer-color-text-reversed);--button-primary-text-color-default: var(--framer-color-text-reversed);--button-primary-text-color-disabled: var(--framer-color-text-tertiary);--button-primary-text-color-focus: var(--framer-color-text-reversed);--button-primary-text-color-hover: var(--framer-color-text-reversed);--button-primary-text-color-pressed: var(--framer-color-text-reversed);--button-primary-text-decoration-default: none;--button-primary-text-decoration-disabled: var(--grey-transparent);--button-primary-text-decoration-focus: none;--button-primary-text-decoration-hover: none;--button-primary-text-decoration-pressed: none;--button-secondary-background-color-default: var(--framer-color-bg-secondary);--button-secondary-background-color-disabled: var(--framer-color-bg-tertiary);--button-secondary-background-color-focus: var(--framer-color-bg-tertiary);--button-secondary-background-color-hover: var(--framer-color-bg-tertiary);--button-secondary-background-color-pressed: var(--framer-color-bg-secondary);--button-secondary-border-color-default: var(--grey-transparent);--button-secondary-border-color-disabled: var(--grey-transparent);--button-secondary-border-color-focus: var(--framer-color-tint-default);--button-secondary-border-color-hover: var(--grey-transparent);--button-secondary-border-color-pressed: var(--grey-transparent);--button-secondary-border-offset-default: var(--size-null);--button-secondary-border-offset-disabled: var(--size-null);--button-secondary-border-offset-focus: var(--size-neg-unit);--button-secondary-border-offset-hover: var(--size-null);--button-secondary-border-offset-pressed: var(--size-null);--button-secondary-border-width-default: var(--size-null);--button-secondary-border-width-disabled: var(--size-null);--button-secondary-border-width-focus: var(--size-pos-unit);--button-secondary-border-width-hover: var(--size-null);--button-secondary-border-width-pressed: var(--size-null);--button-secondary-icon-color-default: var(--framer-color-text-default);--button-secondary-icon-color-disabled: var(--framer-color-text-tertiary);--button-secondary-icon-color-focus: var(--framer-color-text-default);--button-secondary-icon-color-hover: var(--framer-color-text-default);--button-secondary-icon-color-pressed: var(--framer-color-text-default);--button-secondary-text-color-default: var(--framer-color-text-default);--button-secondary-text-color-disabled: var(--framer-color-text-tertiary);--button-secondary-text-color-focus: var(--framer-color-text-default);--button-secondary-text-color-hover: var(--framer-color-text-default);--button-secondary-text-color-pressed: var(--framer-color-text-default);--button-secondary-text-decoration-default: none;--button-secondary-text-decoration-disabled: var(--grey-transparent);--button-secondary-text-decoration-focus: none;--button-secondary-text-decoration-hover: none;--button-secondary-text-decoration-pressed: none;--button-small-height: var(--size-pos-small);--button-small-padding-bottom: var(--size-null);--button-small-padding-left: var(--size-pos-xxsmall);--button-small-padding-right: var(--size-pos-xxsmall);--button-small-padding-top: var(--size-null);--button-status-gap: var(--size-pos-xxsmall);--button-status-height: var(--size-pos-medium);--button-tertiary-background-color-default: var(--framer-color-bg-default);--button-tertiary-background-color-disabled: var(--framer-color-bg-default);--button-tertiary-background-color-focus: var(--framer-color-bg-default);--button-tertiary-background-color-hover: var(--framer-color-bg-default);--button-tertiary-background-color-pressed: var(--framer-color-bg-default);--button-tertiary-border-color-default: var(--grey-transparent);--button-tertiary-border-color-disabled: var(--grey-transparent);--button-tertiary-border-color-focus: var(--grey-transparent);--button-tertiary-border-color-hover: var(--grey-transparent);--button-tertiary-border-color-pressed: var(--grey-transparent);--button-tertiary-border-offset-default: var(--size-null);--button-tertiary-border-offset-disabled: var(--size-null);--button-tertiary-border-offset-focus: var(--size-null);--button-tertiary-border-offset-hover: var(--size-null);--button-tertiary-border-offset-pressed: var(--size-null);--button-tertiary-border-width-default: var(--size-null);--button-tertiary-border-width-disabled: var(--size-null);--button-tertiary-border-width-focus: var(--size-null);--button-tertiary-border-width-hover: var(--size-null);--button-tertiary-border-width-pressed: var(--size-null);--button-tertiary-icon-color-default: var(--framer-color-tint-default);--button-tertiary-icon-color-disabled: var(--framer-color-text-tertiary);--button-tertiary-icon-color-focus: var(--framer-color-tint-default);--button-tertiary-icon-color-hover: var(--framer-color-tint-default);--button-tertiary-icon-color-pressed: var(--framer-color-tint-default);--button-tertiary-padding-bottom: var(--size-null);--button-tertiary-padding-left: var(--size-null);--button-tertiary-padding-right: var(--size-null);--button-tertiary-padding-top: var(--size-null);--button-tertiary-text-color-default: var(--framer-color-tint-default);--button-tertiary-text-color-disabled: var(--framer-color-text-tertiary);--button-tertiary-text-color-focus: var(--framer-color-tint-default);--button-tertiary-text-color-hover: var(--framer-color-tint-default);--button-tertiary-text-color-pressed: var(--framer-color-tint-default);--button-tertiary-text-decoration-default: none;--button-tertiary-text-decoration-disabled: var(--grey-transparent);--button-tertiary-text-decoration-focus: underline;--button-tertiary-text-decoration-hover: none;--button-tertiary-text-decoration-pressed: none;--button-tertiary-text-font-size: var(--font-size-small);--icon-button-base-background-color: var(--grey-transparent);--icon-button-base-border-color: var(--grey-transparent);--icon-button-base-border-offset: var(--size-null);--icon-button-base-border-width: var(--size-null);--icon-button-base-height: var(--size-pos-medium);--icon-button-base-icon-color: var(--framer-color-text-default);--icon-button-base-icon-height: var(--size-pos-small);--icon-button-base-icon-width: var(--size-pos-small);--icon-button-base-notification-border-offset: var(--size-null);--icon-button-base-notification-border-width: var(--size-pos-xunit);--icon-button-base-notification-height: var(--size-pos-xxsmall);--icon-button-base-notification-radius: var(--border-radius-full);--icon-button-base-notification-right: var(--size-pos-xxxsmall);--icon-button-base-notification-top: var(--size-pos-xxxsmall);--icon-button-base-notification-width: var(--size-pos-xxsmall);--icon-button-base-padding-bottom: var(--size-null);--icon-button-base-padding-left: var(--size-null);--icon-button-base-padding-right: var(--size-null);--icon-button-base-padding-top: var(--size-null);--icon-button-base-radius: var(--border-radius-xlarge);--icon-button-base-text-color: var(--framer-color-text-default);--icon-button-base-width: var(--size-pos-medium);--icon-button-default-background-color-default: var(--framer-color-bg-default);--icon-button-default-background-color-disabled: var(--framer-color-bg-default);--icon-button-default-background-color-focus: var(--framer-color-bg-secondary);--icon-button-default-background-color-hover: var(--framer-color-bg-secondary);--icon-button-default-background-color-onselected: var(--framer-color-tint-dimmed);--icon-button-default-background-color-onselected-disabled: var(--framer-color-tint-dimmed);--icon-button-default-background-color-onselected-hover: var(--framer-color-tint-default);--icon-button-default-background-color-pressed: var(--framer-color-bg-default);--icon-button-default-border-color-default: var(--grey-transparent);--icon-button-default-border-color-disabled: var(--grey-transparent);--icon-button-default-border-color-focus: var(--framer-color-tint-default);--icon-button-default-border-color-hover: var(--grey-transparent);--icon-button-default-border-color-pressed: var(--grey-transparent);--icon-button-default-border-offset-default: var(--size-null);--icon-button-default-border-offset-disabled: var(--size-null);--icon-button-default-border-offset-focus: var(--size-neg-unit);--icon-button-default-border-offset-hover: var(--size-null);--icon-button-default-border-offset-pressed: var(--size-null);--icon-button-default-border-width-default: var(--size-null);--icon-button-default-border-width-disabled: var(--size-null);--icon-button-default-border-width-focus: var(--size-pos-unit);--icon-button-default-border-width-hover: var(--size-null);--icon-button-default-border-width-pressed: var(--size-null);--icon-button-default-icon-color-default: var(--framer-color-text-default);--icon-button-default-icon-color-disabled: var(--framer-color-text-tertiary);--icon-button-default-icon-color-focus: var(--framer-color-text-default);--icon-button-default-icon-color-hover: var(--framer-color-text-default);--icon-button-default-icon-color-pressed: var(--framer-color-text-default);--icon-button-default-notification-background-color-default: var(--framer-color-tint-default);--icon-button-default-notification-background-color-disabled: var(--framer-color-bg-tertiary);--icon-button-default-notification-background-color-focus: var(--framer-color-tint-default);--icon-button-default-notification-background-color-hover: var(--framer-color-tint-default);--icon-button-default-notification-background-color-pressed: var(--framer-color-tint-default);--icon-button-default-notification-border-color-default: var(--framer-color-bg-default);--icon-button-default-notification-border-color-disabled: var(--framer-color-bg-default);--icon-button-default-notification-border-color-focus: var(--framer-color-bg-secondary);--icon-button-default-notification-border-color-hover: var(--framer-color-bg-secondary);--icon-button-default-notification-border-color-pressed: var(--framer-color-bg-default);--icon-button-large-height: var(--size-pos-large);--icon-button-large-width: var(--size-pos-large);--icon-button-selected-background-color-default: var(--framer-color-text-default);--icon-button-selected-background-color-disabled: var(--framer-color-text-tertiary);--icon-button-selected-background-color-focus: var(--framer-color-text-default);--icon-button-selected-background-color-hover: var(--framer-color-text-default);--icon-button-selected-background-color-pressed: var(--framer-color-text-default);--icon-button-selected-border-color-default: var(--grey-transparent);--icon-button-selected-border-color-disabled: var(--grey-transparent);--icon-button-selected-border-color-focus: var(--framer-color-tint-default);--icon-button-selected-border-color-hover: var(--grey-transparent);--icon-button-selected-border-color-pressed: var(--grey-transparent);--icon-button-selected-border-offset-default: var(--size-null);--icon-button-selected-border-offset-disabled: var(--size-null);--icon-button-selected-border-offset-focus: var(--size-neg-unit);--icon-button-selected-border-offset-hover: var(--size-null);--icon-button-selected-border-offset-pressed: var(--size-null);--icon-button-selected-border-width-default: var(--size-null);--icon-button-selected-border-width-disabled: var(--size-null);--icon-button-selected-border-width-focus: var(--size-pos-unit);--icon-button-selected-border-width-hover: var(--size-null);--icon-button-selected-border-width-pressed: var(--size-null);--icon-button-selected-icon-color-default: var(--framer-color-bg-default);--icon-button-selected-icon-color-disabled: var(--framer-color-bg-default);--icon-button-selected-icon-color-focus: var(--framer-color-bg-default);--icon-button-selected-icon-color-hover: var(--framer-color-bg-default);--icon-button-selected-icon-color-pressed: var(--framer-color-bg-default);--icon-button-selected-notification-background-color-default: var(--framer-color-tint-default);--icon-button-selected-notification-background-color-disabled: var(--framer-color-bg-tertiary);--icon-button-selected-notification-background-color-focus: var(--framer-color-tint-default);--icon-button-selected-notification-background-color-hover: var(--framer-color-tint-default);--icon-button-selected-notification-background-color-pressed: var(--framer-color-tint-default);--icon-button-selected-notification-border-color-default: var(--framer-color-text-default);--icon-button-selected-notification-border-color-disabled: var(--framer-color-text-tertiary);--icon-button-selected-notification-border-color-focus: var(--framer-color-text-default);--icon-button-selected-notification-border-color-hover: var(--framer-color-text-default);--icon-button-selected-notification-border-color-pressed: var(--framer-color-text-default);--icon-button-small-height: var(--size-pos-small);--icon-button-small-width: var(--size-pos-small)}.button__status{display:flex;align-items:center;gap:var(--button-status-gap);height:var(--button-status-height)}.button,.icon-button{display:flex;position:relative;justify-content:center;align-items:center;cursor:default;border:none;-webkit-user-select:none;user-select:none}.button:disabled,.icon-button:disabled{pointer-events:none}.button .button__icon,.icon-button .button__icon{display:flex;justify-content:center;align-items:center;width:var(--button-base-icon-width);height:var(--button-base-icon-height);--icon-picto-color: var(--button-base-icon-color)}.button .button__label,.icon-button .button__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button .button__caret,.icon-button .button__caret{display:flex;justify-content:center;align-items:center;width:var(--button-base-caret-width);height:var(--button-base-caret-height);--icon-picto-color: var(--button-base-icon-color)}.button .button__loader,.icon-button .button__loader{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%);z-index:2;--icon-picto-color: var(--button-base-icon-color)}.button.button--loading,.icon-button.button--loading{pointer-events:none}.button.button--loading>.button__label,.button.button--loading>.button__caret,.button.button--loading>.button__icon,.icon-button.button--loading>.button__label,.icon-button.button--loading>.button__caret,.icon-button.button--loading>.button__icon{opacity:0}.button{gap:var(--button-base-gap);outline:var(--button-base-border-width) solid var(--button-base-border-color);outline-offset:var(--button-base-border-offset);border-radius:var(--button-base-radius);background-color:var(--button-base-background-color);padding:var(--button-base-padding);height:var(--button-base-height);color:var(--button-base-text-color);font-weight:var(--button-base-text-font-weight);font-size:var(--button-base-text-font-size);line-height:var(--button-base-text-line-height);font-family:var(--button-base-text-font-family);letter-spacing:var(--button-base-text-letter-spacing);text-decoration:var(--button-base-text-decoration);text-transform:var(--button-base-text-transform)}.button a{color:var(--button-base-text-color);text-decoration:var(--button-base-text-decoration)}.button{--button-base-padding: var(--button-base-padding-top) var(--button-base-padding-right) var(--button-base-padding-bottom) var(--button-base-padding-left)}.button--small{--button-base-padding: var(--button-small-padding-top) var(--button-small-padding-right) var(--button-small-padding-bottom) var(--button-small-padding-left);--button-base-height: var(--button-small-height)}.button--large{--button-base-padding: var(--button-large-padding-top) var(--button-large-padding-right) var(--button-large-padding-bottom) var(--button-large-padding-left);--button-base-height: var(--button-large-height)}.button .icon-chip{pointer-events:auto}.button--primary{--button-base-background-color: var( --button-primary-background-color-default );--button-base-border-color: var(--button-primary-border-color-default);--button-base-border-width: var(--button-primary-border-width-default);--button-base-border-offset: var(--button-primary-border-offset-default);--button-base-text-color: var(--button-primary-text-color-default);--button-base-icon-color: var(--button-primary-icon-color-default);--button-base-text-decoration: var( --button-primary-text-decoration-default );--icon-picto-color: var(--button-primary-icon-color-default)}.button--primary:enabled:hover{--button-base-background-color: var( --button-primary-background-color-hover );--button-base-border-color: var(--button-primary-border-color-hover);--button-base-border-width: var(--button-primary-border-width-hover);--button-base-border-offset: var(--button-primary-border-offset-hover);--button-base-text-color: var(--button-primary-text-color-hover);--button-base-icon-color: var(--button-primary-icon-color-hover);--button-base-text-decoration: var( --button-primary-text-decoration-hover );--icon-picto-color: var(--button-primary-icon-color-hover)}.button--primary:enabled:focus{--button-base-background-color: var( --button-primary-background-color-focus );--button-base-border-color: var(--button-primary-border-color-focus);--button-base-border-width: var(--button-primary-border-width-focus);--button-base-border-offset: var(--button-primary-border-offset-focus);--button-base-text-color: var(--button-primary-text-color-focus);--button-base-icon-color: var(--button-primary-icon-color-focus);--button-base-text-decoration: var( --button-primary-text-decoration-focus );--icon-picto-color: var(--button-primary-icon-color-focus)}.button--primary:enabled:active{--button-base-background-color: var( --button-primary-background-color-pressed );--button-base-border-color: var(--button-primary-border-color-pressed);--button-base-border-width: var(--button-primary-border-width-pressed);--button-base-border-offset: var(--button-primary-border-offset-pressed);--button-base-text-color: var(--button-primary-text-color-pressed);--button-base-icon-color: var(--button-primary-icon-color-pressed);--button-base-text-decoration: var( --button-primary-text-decoration-pressed );--icon-picto-color: var(--button-primary-icon-color-pressed)}.button--primary:disabled{--button-base-background-color: var( --button-primary-background-color-disabled );--button-base-border-color: var(--button-primary-border-color-disabled);--button-base-border-width: var(--button-primary-border-width-disabled);--button-base-border-offset: var(--button-primary-border-offset-disabled);--button-base-text-color: var(--button-primary-text-color-disabled);--button-base-icon-color: var(--button-primary-icon-color-disabled);--button-base-text-decoration: var( --button-primary-text-decoration-disabled );--icon-picto-color: var(--button-primary-icon-color-disabled)}.button--secondary{--button-base-background-color: var( --button-secondary-background-color-default );--button-base-border-color: var(--button-secondary-border-color-default);--button-base-border-width: var(--button-secondary-border-width-default);--button-base-border-offset: var(--button-secondary-border-offset-default);--button-base-text-color: var(--button-secondary-text-color-default);--button-base-icon-color: var(--button-secondary-icon-color-default);--button-base-text-decoration: var( --button-secondary-text-decoration-default );--icon-picto-color: var(--button-secondary-icon-color-default)}.button--secondary:enabled:hover{--button-base-background-color: var( --button-secondary-background-color-hover );--button-base-border-color: var(--button-secondary-border-color-hover);--button-base-border-width: var(--button-secondary-border-width-hover);--button-base-border-offset: var(--button-secondary-border-offset-hover);--button-base-text-color: var(--button-secondary-text-color-hover);--button-base-icon-color: var(--button-secondary-icon-color-hover);--button-base-text-decoration: var( --button-secondary-text-decoration-hover );--icon-picto-color: var(--button-secondary-icon-color-hover)}.button--secondary:enabled:focus{--button-base-background-color: var( --button-secondary-background-color-focus );--button-base-border-color: var(--button-secondary-border-color-focus);--button-base-border-width: var(--button-secondary-border-width-focus);--button-base-border-offset: var(--button-secondary-border-offset-focus);--button-base-text-color: var(--button-secondary-text-color-focus);--button-base-icon-color: var(--button-secondary-icon-color-focus);--button-base-text-decoration: var( --button-secondary-text-decoration-focus );--icon-picto-color: var(--button-secondary-icon-color-focus)}.button--secondary:enabled:active{--button-base-background-color: var( --button-secondary-background-color-pressed );--button-base-border-color: var(--button-secondary-border-color-pressed);--button-base-border-width: var(--button-secondary-border-width-pressed);--button-base-border-offset: var( --button-secondary-border-offset-pressed );--button-base-text-color: var(--button-secondary-text-color-pressed);--button-base-icon-color: var(--button-secondary-icon-color-pressed);--button-base-text-decoration: var( --button-secondary-text-decoration-pressed );--icon-picto-color: var(--button-secondary-icon-color-pressed)}.button--secondary:disabled{--button-base-background-color: var( --button-secondary-background-color-disabled );--button-base-border-color: var(--button-secondary-border-color-disabled);--button-base-border-width: var(--button-secondary-border-width-disabled);--button-base-border-offset: var( --button-secondary-border-offset-disabled );--button-base-text-color: var(--button-secondary-text-color-disabled);--button-base-icon-color: var(--button-secondary-icon-color-disabled);--button-base-text-decoration: var( --button-secondary-text-decoration-disabled );--icon-picto-color: var(--button-secondary-icon-color-disabled)}.button--tertiary{--button-base-text-font-size: var(--button-tertiary-text-font-size);--button-base-padding: var(--button-tertiary-padding-top) var(--button-tertiary-padding-right) var(--button-tertiary-padding-bottom) var(--button-tertiary-padding-left);--button-base-background-color: var( --button-tertiary-background-color-default );--button-base-border-color: var(--button-tertiary-border-color-default);--button-base-border-width: var(--button-tertiary-border-width-default);--button-base-border-offset: var(--button-tertiary-border-offset-default);--button-base-text-color: var(--button-tertiary-text-color-default);--button-base-icon-color: var(--button-tertiary-icon-color-default);--button-base-text-decoration: var( --button-tertiary-text-decoration-default );--icon-picto-color: var(--button-tertiary-icon-color-default)}.button--tertiary:enabled:hover{--button-base-background-color: var( --button-tertiary-background-color-hover );--button-base-border-color: var(--button-tertiary-border-color-hover);--button-base-border-width: var(--button-tertiary-border-width-hover);--button-base-border-offset: var(--button-tertiary-border-offset-hover);--button-base-text-color: var(--button-tertiary-text-color-hover);--button-base-icon-color: var(--button-tertiary-icon-color-hover);--button-base-text-decoration: var( --button-tertiary-text-decoration-hover );--icon-picto-color: var(--button-tertiary-icon-color-hover)}.button--tertiary:enabled:focus{--button-base-background-color: var( --button-tertiary-background-color-focus );--button-base-border-color: var(--button-tertiary-border-color-focus);--button-base-border-width: var(--button-tertiary-border-width-focus);--button-base-border-offset: var(--button-tertiary-border-offset-focus);--button-base-text-color: var(--button-tertiary-text-color-focus);--button-base-icon-color: var(--button-tertiary-icon-color-focus);--button-base-text-decoration: var( --button-tertiary-text-decoration-focus );--icon-picto-color: var(--button-tertiary-icon-color-focus)}.button--tertiary:enabled:active{--button-base-background-color: var( --button-tertiary-background-color-pressed );--button-base-border-color: var(--button-tertiary-border-color-pressed);--button-base-border-width: var(--button-tertiary-border-width-pressed);--button-base-border-offset: var(--button-tertiary-border-offset-pressed);--button-base-text-color: var(--button-tertiary-text-color-pressed);--button-base-icon-color: var(--button-tertiary-icon-color-pressed);--button-base-text-decoration: var( --button-tertiary-text-decoration-pressed );--icon-picto-color: var(--button-tertiary-icon-color-pressed)}.button--tertiary:disabled{--button-base-background-color: var( --button-tertiary-background-color-disabled );--button-base-border-color: var(--button-tertiary-border-color-disabled);--button-base-border-width: var(--button-tertiary-border-width-disabled);--button-base-border-offset: var( --button-tertiary-border-offset-disabled );--button-base-text-color: var(--button-tertiary-text-color-disabled);--button-base-icon-color: var(--button-tertiary-icon-color-disabled);--button-base-text-decoration: var( --button-tertiary-text-decoration-disabled );--icon-picto-color: var(--button-tertiary-icon-color-disabled)}.button--destructive{--button-base-background-color: var( --button-destructive-background-color-default );--button-base-border-color: var(--button-destructive-border-color-default);--button-base-border-width: var(--button-destructive-border-width-default);--button-base-border-offset: var( --button-destructive-border-offset-default );--button-base-text-color: var(--button-destructive-text-color-default);--button-base-icon-color: var(--button-destructive-icon-color-default);--button-base-text-decoration: var( --button-destructive-text-decoration-default );--icon-picto-color: var(--button-destructive-icon-color-default)}.button--destructive:enabled:hover{--button-base-background-color: var( --button-destructive-background-color-hover );--button-base-border-color: var(--button-destructive-border-color-hover);--button-base-border-width: var(--button-destructive-border-width-hover);--button-base-border-offset: var( --button-destructive-border-offset-hover );--button-base-text-color: var(--button-destructive-text-color-hover);--button-base-icon-color: var(--button-destructive-icon-color-hover);--button-base-text-decoration: var( --button-destructive-text-decoration-hover );--icon-picto-color: var(--button-destructive-icon-color-hover)}.button--destructive:enabled:focus{--button-base-background-color: var( --button-destructive-background-color-focus );--button-base-border-color: var(--button-destructive-border-color-focus);--button-base-border-width: var(--button-destructive-border-width-focus);--button-base-border-offset: var( --button-destructive-border-offset-focus );--button-base-text-color: var(--button-destructive-text-color-focus);--button-base-icon-color: var(--button-destructive-icon-color-focus);--button-base-text-decoration: var( --button-destructive-text-decoration-focus );--icon-picto-color: var(--button-destructive-icon-color-focus)}.button--destructive:enabled:active{--button-base-background-color: var( --button-destructive-background-color-pressed );--button-base-border-color: var( --button-destructive-border-color-pressed );--button-base-border-width: var( --button-destructive-border-width-pressed );--button-base-border-offset: var( --button-destructive-border-offset-pressed );--button-base-text-color: var(--button-destructive-text-color-pressed);--button-base-icon-color: var(--button-destructive-icon-color-pressed);--button-base-text-decoration: var( --button-destructive-text-decoration-pressed );--icon-picto-color: var(--button-destructive-icon-color-pressed)}.button--destructive:disabled{--button-base-background-color: var( --button-destructive-background-color-disabled );--button-base-border-color: var( --button-destructive-border-color-disabled );--button-base-border-width: var( --button-destructive-border-width-disabled );--button-base-border-offset: var( --button-destructive-border-offset-disabled );--button-base-text-color: var(--button-destructive-text-color-disabled);--button-base-icon-color: var(--button-destructive-icon-color-disabled);--button-base-text-decoration: var( --button-destructive-text-decoration-disabled );--icon-picto-color: var(--button-destructive-icon-color-disabled)}.button--alternative{--button-base-background-color: var( --button-alternative-background-color-default );--button-base-border-color: var(--button-alternative-border-color-default);--button-base-border-width: var(--button-alternative-border-width-default);--button-base-border-offset: var( --button-alternative-border-offset-default );--button-base-text-color: var(--button-alternative-text-color-default);--button-base-icon-color: var(--button-alternative-icon-color-default);--button-base-text-decoration: var( --button-alternative-text-decoration-default );--icon-picto-color: var(--button-alternative-icon-color-default)}.button--alternative:enabled:hover{--button-base-background-color: var( --button-alternative-background-color-hover );--button-base-border-color: var(--button-alternative-border-color-hover);--button-base-border-width: var(--button-alternative-border-width-hover);--button-base-border-offset: var( --button-alternative-border-offset-hover );--button-base-text-color: var(--button-alternative-text-color-hover);--button-base-icon-color: var(--button-alternative-icon-color-hover);--button-base-text-decoration: var( --button-alternative-text-decoration-hover );--icon-picto-color: var(--button-alternative-icon-color-hover)}.button--alternative:enabled:focus{--button-base-background-color: var( --button-alternative-background-color-focus );--button-base-border-color: var(--button-alternative-border-color-focus);--button-base-border-width: var(--button-alternative-border-width-focus);--button-base-border-offset: var( --button-alternative-border-offset-focus );--button-base-text-color: var(--button-alternative-text-color-focus);--button-base-icon-color: var(--button-alternative-icon-color-focus);--button-base-text-decoration: var( --button-alternative-text-decoration-focus );--icon-picto-color: var(--button-alternative-icon-color-focus)}.button--alternative:enabled:active{--button-base-background-color: var( --button-alternative-background-color-pressed );--button-base-border-color: var( --button-alternative-border-color-pressed );--button-base-border-width: var( --button-alternative-border-width-pressed );--button-base-border-offset: var( --button-alternative-border-offset-pressed );--button-base-text-color: var(--button-alternative-text-color-pressed);--button-base-icon-color: var(--button-alternative-icon-color-pressed);--button-base-text-decoration: var( --button-alternative-text-decoration-pressed );--icon-picto-color: var(--button-alternative-icon-color-pressed)}.button--alternative:disabled{--button-base-background-color: var( --button-alternative-background-color-disabled );--button-base-border-color: var( --button-alternative-border-color-disabled );--button-base-border-width: var( --button-alternative-border-width-disabled );--button-base-border-offset: var( --button-alternative-border-offset-disabled );--button-base-text-color: var(--button-alternative-text-color-disabled);--button-base-icon-color: var(--button-alternative-icon-color-disabled);--button-base-text-decoration: var( --button-alternative-text-decoration-disabled );--icon-picto-color: var(--button-alternative-icon-color-disabled)}.icon-button{outline:var(--icon-button-base-border-width) solid var(--icon-button-base-border-color);outline-offset:var(--icon-button-base-border-offset);border:none;border-radius:var(--icon-button-base-radius);background-color:var(--icon-button-base-background-color);padding:var(--icon-button-base-padding-top) var(--icon-button-base-padding-right) var(--icon-button-base-padding-bottom) var(--icon-button-base-padding-left);width:var(--icon-button-base-width);height:var(--icon-button-base-height)}.icon-button .icon-box{background-color:var(--icon-button-base-icon-color);width:var(--icon-button-base-icon-width);height:var(--icon-button-base-icon-height)}.icon-button--small{width:var(--icon-button-small-width);height:var(--icon-button-small-height)}.icon-button--large{width:var(--icon-button-large-width);height:var(--icon-button-large-height)}.icon-button--new:after{position:absolute;top:var(--icon-button-base-notification-top);right:var(--icon-button-base-notification-right);outline:var(--icon-button-base-notification-border-width) solid var(--icon-button-base-notification-border-color);outline-offset:var(--icon-button-base-notification-border-offset);border-radius:var(--icon-button-base-notification-radius);background-color:var(--icon-button-base-notification-background-color);width:var(--icon-button-base-notification-width);height:var(--icon-button-base-notification-height);content:""}.icon-button *{filter:none}.icon-button{--icon-button-base-background-color: var( --icon-button-default-background-color-default );--icon-button-base-border-color: var( --icon-button-default-border-color-default );--icon-button-base-border-width: var( --icon-button-default-border-width-default );--icon-button-base-border-offset: var( --icon-button-default-border-offset-default );--icon-button-base-icon-color: var( --icon-button-default-icon-color-default );--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-default );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-default )}.icon-button:enabled:hover{--icon-button-base-background-color: var( --icon-button-default-background-color-hover );--icon-button-base-border-color: var( --icon-button-default-border-color-hover );--icon-button-base-border-width: var( --icon-button-default-border-width-hover );--icon-button-base-border-offset: var( --icon-button-default-border-offset-hover );--icon-button-base-icon-color: var(--icon-button-default-icon-color-hover);--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-hover );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-hover )}.icon-button:enabled:focus{--icon-button-base-background-color: var( --icon-button-default-background-color-focus );--icon-button-base-border-color: var( --icon-button-default-border-color-focus );--icon-button-base-border-width: var( --icon-button-default-border-width-focus );--icon-button-base-border-offset: var( --icon-button-default-border-offset-focus );--icon-button-base-icon-color: var(--icon-button-default-icon-color-focus);--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-focus );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-focus )}.icon-button:enabled:active{--icon-button-base-background-color: var( --icon-button-default-background-color-pressed );--icon-button-base-border-color: var( --icon-button-default-border-color-pressed );--icon-button-base-border-width: var( --icon-button-default-border-width-pressed );--icon-button-base-border-offset: var( --icon-button-default-border-offset-pressed );--icon-button-base-icon-color: var( --icon-button-default-icon-color-pressed );--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-pressed );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-pressed )}.icon-button:disabled{--icon-button-base-background-color: var( --icon-button-background-color-disabled );--icon-button-base-border-color: var( --icon-button-default-border-color-disabled );--icon-button-base-border-width: var( --icon-button-default-border-width-disabled );--icon-button-base-border-offset: var( --icon-button-default-border-offset-disabled );--icon-button-base-icon-color: var( --icon-button-default-icon-color-disabled );--icon-button-base-notification-background-color: var( --icon-button-default-notification-background-color-disabled );--icon-button-base-notification-border-color: var( --icon-button-default-notification-border-color-disabled )}.icon-button--selected{--icon-button-base-background-color: var( --icon-button-selected-background-color-default );--icon-button-base-border-color: var( --icon-button-selected-border-color-default );--icon-button-base-border-width: var( --icon-button-selected-border-width-default );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-default );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-default );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-default );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-default )}.icon-button--selected:enabled:hover{--icon-button-base-background-color: var( --icon-button-selected-background-color-hover );--icon-button-base-border-color: var( --icon-button-selected-border-color-hover );--icon-button-base-border-width: var( --icon-button-selected-border-width-hover );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-hover );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-hover );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-hover );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-hover )}.icon-button--selected:enabled:focus{--icon-button-base-background-color: var( --icon-button-selected-background-color-focus );--icon-button-base-border-color: var( --icon-button-selected-border-color-focus );--icon-button-base-border-width: var( --icon-button-selected-border-width-focus );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-focus );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-focus );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-focus );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-focus )}.icon-button--selected:enabled:active{--icon-button-base-background-color: var( --icon-button-selected-background-color-pressed );--icon-button-base-border-color: var( --icon-button-selected-border-color-pressed );--icon-button-base-border-width: var( --icon-button-selected-border-width-pressed );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-pressed );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-pressed );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-pressed );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-pressed )}.icon-button--selected:disabled{--icon-button-base-background-color: var( --icon-button-selected-background-color-disabled );--icon-button-base-border-color: var( --icon-button-selected-border-color-disabled );--icon-button-base-border-width: var( --icon-button-selected-border-width-disabled );--icon-button-base-border-offset: var( --icon-button-selected-border-offset-disabled );--icon-button-base-icon-color: var( --icon-button-selected-icon-color-disabled );--icon-button-base-notification-background-color: var( --icon-button-selected-notification-background-color-disabled );--icon-button-base-notification-border-color: var( --icon-button-selected-notification-border-color-disabled )}
package/dist/assets/Card.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:root[data-theme=penpot]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--penpot-color-background-primary);--card-background-color-focus: var(--penpot-color-accent-primary-muted);--card-background-color-hover: var(--penpot-color-background-secondary);--card-border-color-default: transparent;--card-border-color-focus: var(--penpot-color-accent-primary);--card-border-color-hover: transparent;--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--border-radius-xlarge);--card-ratio: 2 / 1;--card-width: 200px}:root[data-theme=sketch]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--sketch-color-background-primary);--card-background-color-focus: var(--sketch-color-accent-disabled);--card-background-color-hover: var(--sketch-color-background-secondary);--card-border-color-default: transparent;--card-border-color-focus: var(--sketch-color-accent-primary);--card-border-color-hover: transparent;--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--size-pos-xsmall);--card-ratio: 2 / 1;--card-width: 200px}:root[data-theme=figma]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--figma-color-bg);--card-background-color-focus: var(--figma-color-bg-selected);--card-background-color-hover: var(--figma-color-bg-hover);--card-border-color-default: transparent;--card-border-color-focus: var(--figma-color-border-selected);--card-border-color-hover: transparent;--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--border-radius-xlarge);--card-ratio: 2 / 1;--card-width: 200px}:root[data-theme=framer]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--framer-color-bg);--card-background-color-focus: var(--framer-color-tint-dimmed);--card-background-color-hover: var(--framer-color-bg-secondary);--card-border-color-default: transparent;--card-border-color-focus: var(--framer-color-tint);--card-border-color-hover: transparent;--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--border-radius-xlarge);--card-ratio: 2 / 1;--card-width: 200px}.card{display:flex;position:relative;flex-direction:column;gap:var(--card-gap);box-sizing:border-box;outline:var(--card-border-width) solid var(--card-border-color);outline-offset:var(--card-border-offset);border-radius:var(--card-radius);background-color:var(--card-background-color);padding:var(--card-padding-top) var(--card-padding-right) var(--card-padding-bottom) var(--card-padding-left);width:var(--card-width)}.card--fill{width:100%}.card{--card-background-color: var(--card-background-color-default);--card-border-width: var(--card-border-width-default);--card-border-color: var(--card-border-color-default);--card-border-offset: var(--card-border-offset-default)}.card:hover{--card-background-color: var(--card-background-color-hover);--card-border-width: var(--card-border-width-hover);--card-border-color: var(--card-border-color-hover);--card-border-offset: var(--card-border-offset-hover)}.card:hover .card__actions{visibility:visible}.card:focus{--card-background-color: var(--card-background-color-focus);--card-border-width: var(--card-border-width-focus);--card-border-color: var(--card-border-color-focus);--card-border-offset: var(--card-border-offset-focus)}.card:focus .card__actions{visibility:visible}.card__tags{display:flex;position:absolute;justify-content:end;z-index:2;inset:calc(var(--card-padding-top) / 2) calc(var(--card-padding-right) / 2) auto auto}.card__asset{position:relative;aspect-ratio:var(--card-ratio)}.card__actions{display:flex;position:absolute;flex-wrap:wrap;place-content:center center;align-items:center;gap:var(--card-actions-gap);visibility:hidden;inset:0;padding:var(--card-actions-padding-top) var(--card-actions-padding-right) var(--card-actions-padding-bottom) var(--card-actions-padding-left)}.card__text{display:flex;flex-direction:column;gap:var(--card-content-gap)}
1
+ @charset "UTF-8";:root[data-theme=penpot]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--penpot-color-background-primary);--card-background-color-focus: var(--penpot-color-accent-primary-muted);--card-background-color-hover: var(--penpot-color-background-secondary);--card-border-color-default: var(--grey-transparent);--card-border-color-focus: var(--penpot-color-accent-primary-default);--card-border-color-hover: var(--grey-transparent);--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--border-radius-xlarge);--card-ratio: 2 / 1;--card-width: 200px}:root[data-theme=sketch]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--sketch-color-background-primary);--card-background-color-focus: var(--sketch-color-accent-disabled);--card-background-color-hover: var(--sketch-color-background-secondary);--card-border-color-default: var(--grey-transparent);--card-border-color-focus: var(--sketch-color-accent-primary);--card-border-color-hover: var(--grey-transparent);--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--size-pos-xsmall);--card-ratio: 2 / 1;--card-width: 200px}:root[data-theme=figma]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--figma-color-bg-default);--card-background-color-focus: var(--figma-color-bg-selected-default);--card-background-color-hover: var(--figma-color-bg-hover);--card-border-color-default: var(--grey-transparent);--card-border-color-focus: var(--figma-color-border-selected-default);--card-border-color-hover: var(--grey-transparent);--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--border-radius-xlarge);--card-ratio: 2 / 1;--card-width: 200px}:root[data-theme=framer]{--card-actions-gap: var(--size-pos-xxsmall);--card-actions-padding-bottom: var(--size-pos-xxsmall);--card-actions-padding-left: var(--size-pos-xxsmall);--card-actions-padding-right: var(--size-pos-xxsmall);--card-actions-padding-top: var(--size-pos-xxsmall);--card-background-color-default: var(--framer-color-bg-default);--card-background-color-focus: var(--framer-color-tint-dimmed);--card-background-color-hover: var(--framer-color-bg-secondary);--card-border-color-default: var(--grey-transparent);--card-border-color-focus: var(--framer-color-tint-default);--card-border-color-hover: var(--grey-transparent);--card-border-offset-default: var(--size-null);--card-border-offset-focus: var(--size-neg-unit);--card-border-offset-hover: var(--size-null);--card-border-width-default: var(--size-null);--card-border-width-focus: var(--size-pos-unit);--card-border-width-hover: var(--size-null);--card-content-gap: var(--size-pos-xxxsmall);--card-gap: var(--size-pos-xxsmall);--card-padding-bottom: var(--size-pos-xxsmall);--card-padding-left: var(--size-pos-xxsmall);--card-padding-right: var(--size-pos-xxsmall);--card-padding-top: var(--size-pos-xxsmall);--card-radius: var(--border-radius-xlarge);--card-ratio: 2 / 1;--card-width: 200px}.card{display:flex;position:relative;flex-direction:column;gap:var(--card-gap);box-sizing:border-box;outline:var(--card-border-width) solid var(--card-border-color);outline-offset:var(--card-border-offset);border-radius:var(--card-radius);background-color:var(--card-background-color);padding:var(--card-padding-top) var(--card-padding-right) var(--card-padding-bottom) var(--card-padding-left);width:var(--card-width)}.card--fill{width:100%}.card{--card-background-color: var(--card-background-color-default);--card-border-width: var(--card-border-width-default);--card-border-color: var(--card-border-color-default);--card-border-offset: var(--card-border-offset-default)}.card:hover{--card-background-color: var(--card-background-color-hover);--card-border-width: var(--card-border-width-hover);--card-border-color: var(--card-border-color-hover);--card-border-offset: var(--card-border-offset-hover)}.card:hover .card__actions{visibility:visible}.card:focus{--card-background-color: var(--card-background-color-focus);--card-border-width: var(--card-border-width-focus);--card-border-color: var(--card-border-color-focus);--card-border-offset: var(--card-border-offset-focus)}.card:focus .card__actions{visibility:visible}.card__tags{display:flex;position:absolute;justify-content:end;z-index:2;inset:calc(var(--card-padding-top) / 2) calc(var(--card-padding-right) / 2) auto auto}.card__asset{position:relative;aspect-ratio:var(--card-ratio)}.card__actions{display:flex;position:absolute;flex-wrap:wrap;place-content:center center;align-items:center;gap:var(--card-actions-gap);visibility:hidden;inset:0;padding:var(--card-actions-padding-top) var(--card-actions-padding-right) var(--card-actions-padding-bottom) var(--card-actions-padding-left)}.card__text{display:flex;flex-direction:column;gap:var(--card-content-gap)}
package/dist/assets/Chip.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:root[data-theme=penpot]{--chip-background-color-default: var(--penpot-color-accent-primary-muted);--chip-background-color-hover: var(--penpot-color-accent-tertiary);--chip-background-color-inactive: var(--penpot-color-background-tertiary);--chip-background-color-on-background: color(srgb 1 1 1 / .4);--chip-border-color-default: transparent;--chip-border-color-hover: var(--penpot-color-accent-tertiary);--chip-border-color-inactive: transparent;--chip-border-color-on-background: transparent;--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-neg-unit);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-pos-unit);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxxsmall);--chip-padding-right: var(--size-pos-xxxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-large);--chip-text-color-default: var(--penpot-color-accent-primary);--chip-text-color-hover: var(--penpot-color-foreground-primary);--chip-text-color-inactive: var(--penpot-color-foreground-secondary);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xsmall);--chip-text-transform: uppercase;--chip-text-weight-default: var(--font-weight-accent);--chip-text-weight-on-background: var(--font-weight-normal)}:root[data-theme=sketch]{--chip-background-color-default: var(--sketch-color-accent-primary);--chip-background-color-hover: var(--sketch-color-accent-secondary);--chip-background-color-inactive: var(--sketch-color-background-tertiary);--chip-background-color-on-background: color(srgb 1 1 1 / .4);--chip-border-color-default: transparent;--chip-border-color-hover: transparent;--chip-border-color-inactive: transparent;--chip-border-color-on-background: transparent;--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-null);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-null);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxsmall);--chip-padding-right: var(--size-pos-xxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-xlarge);--chip-text-color-default: var(--sketch-color-foreground-inverted);--chip-text-color-hover: var(--sketch-color-foreground-inverted);--chip-text-color-inactive: var(--sketch-color-foreground-secondary);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xsmall);--chip-text-transform: none;--chip-text-weight-default: var(--font-weight-medium);--chip-text-weight-on-background: var(--font-weight-normal)}:root[data-theme=figma]{--chip-background-color-default: var(--figma-color-bg-selected-secondary);--chip-background-color-hover: var(--figma-color-bg-selected);--chip-background-color-inactive: var(--figma-color-bg-tertiary);--chip-background-color-on-background: color(srgb 1 1 1 / .4);--chip-border-color-default: transparent;--chip-border-color-hover: transparent;--chip-border-color-inactive: transparent;--chip-border-color-on-background: transparent;--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-null);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-null);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxxsmall);--chip-padding-right: var(--size-pos-xxxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-small);--chip-text-color-default: var(--figma-color-text-brand);--chip-text-color-hover: var(--figma-color-text-brand);--chip-text-color-inactive: var(--figma-color-text);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xxsmall);--chip-text-transform: none;--chip-text-weight-default: var(--font-weight-accent);--chip-text-weight-on-background: var(--font-weight-normal)}:root[data-theme=framer]{--chip-background-color-default: var(--framer-color-tint-dimmed);--chip-background-color-hover: var(--framer-color-tint);--chip-background-color-inactive: var(--framer-color-bg-secondary);--chip-background-color-on-background: color(srgb 1 1 1 / .4);--chip-border-color-default: transparent;--chip-border-color-hover: transparent;--chip-border-color-inactive: transparent;--chip-border-color-on-background: transparent;--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-null);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-null);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxxsmall);--chip-padding-right: var(--size-pos-xxxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-medium);--chip-text-color-default: var(--framer-color-tint);--chip-text-color-hover: var(--framer-color-text-reversed);--chip-text-color-inactive: var(--framer-color-text-tertiary);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xxsmall);--chip-text-transform: uppercase;--chip-text-weight-default: var(--font-weight-bold);--chip-text-weight-on-background: var(--font-weight-accent)}.chip{display:inline-flex;position:relative;align-items:center;gap:var(--chip-gap);cursor:default;box-sizing:border-box;margin:var(--chip-margin-top) var(--chip-margin-right) var(--chip-margin-bottom) var(--chip-margin-left);outline:var(--chip-border-width) solid var(--chip-border-color);outline-offset:var(--chip-border-offset);border-radius:var(--chip-radius);background-color:var(--chip-background-color);padding:var(--chip-padding-top) var(--chip-padding-right) var(--chip-padding-bottom) var(--chip-padding-left);max-width:100%;height:var(--chip-height);-webkit-user-select:none;user-select:none}.chip--interactive{pointer-events:auto}.chip--interactive{--chip-background-color: var(--chip-background-color-default);--chip-border-color: var(--chip-border-color-default);--chip-border-offset: var(--chip-border-offset-default);--chip-border-width: var(--chip-border-width-default);--chip-text-color: var(--chip-text-color-default)}.chip--interactive:hover,.chip--interactive:focus{--chip-background-color: var(--chip-background-color-hover);--chip-border-color: var(--chip-border-color-hover);--chip-border-offset: var(--chip-border-offset-hover);--chip-border-width: var(--chip-border-width-hover);--chip-text-color: var(--chip-text-color-hover)}.chip .chip__text{color:var(--chip-text-color);font-weight:var(--chip-text-weight);font-size:var(--chip-text-size);letter-spacing:var(--chip-text-letter-spacing);text-transform:var(--chip-text-transform);text-wrap:nowrap}.chip .chip__left-slot,.chip .chip__right-slot{display:flex}.chip{--chip-background-color: var(--chip-background-color-default);--chip-border-color: var(--chip-border-color-default);--chip-border-width: var(--chip-border-width-default);--chip-border-offset: var(--chip-border-offset-default);--chip-text-color: var(--chip-text-color-default);--chip-text-weight: var(--chip-text-weight-default)}.chip--inactive{--chip-background-color: var(--chip-background-color-inactive);--chip-border-color: var(--chip-border-color-inactive);--chip-border-width: var(--chip-border-width-inactive);--chip-border-offset: var(--chip-border-offset-inactive);--chip-text-color: var(--chip-text-color-inactive)}.chip--solo{margin:0}.chip--on-background{margin:0;--chip-background-color: var(--chip-background-color-on-background);--chip-border-color: var(--chip-border-color-on-background);--chip-border-width: var(--chip-border-width-on-background);--chip-border-offset: var(--chip-border-offset-on-background);--chip-text-color: var(--chip-text-color-on-background);--chip-text-weight: var(--chip-text-weight-on-background)}
1
+ @charset "UTF-8";:root[data-theme=penpot]{--chip-background-color-default: var(--penpot-color-accent-primary-muted);--chip-background-color-hover: var(--penpot-color-accent-tertiary);--chip-background-color-inactive: var(--penpot-color-background-tertiary);--chip-background-color-on-background: rgb(100% 100% 100% / .4);--chip-border-color-default: var(--grey-transparent);--chip-border-color-hover: var(--penpot-color-accent-tertiary);--chip-border-color-inactive: var(--grey-transparent);--chip-border-color-on-background: var(--grey-transparent);--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-neg-unit);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-pos-unit);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxxsmall);--chip-padding-right: var(--size-pos-xxxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-large);--chip-text-color-default: var(--penpot-color-accent-primary-default);--chip-text-color-hover: var(--penpot-color-foreground-primary);--chip-text-color-inactive: var(--penpot-color-foreground-secondary);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xsmall);--chip-text-transform: uppercase;--chip-text-weight-default: var(--font-weight-accent);--chip-text-weight-on-background: var(--font-weight-normal)}:root[data-theme=sketch]{--chip-background-color-default: var(--sketch-color-accent-primary);--chip-background-color-hover: var(--sketch-color-accent-secondary);--chip-background-color-inactive: var(--sketch-color-background-tertiary);--chip-background-color-on-background: rgb(100% 100% 100% / .4);--chip-border-color-default: var(--grey-transparent);--chip-border-color-hover: var(--grey-transparent);--chip-border-color-inactive: var(--grey-transparent);--chip-border-color-on-background: var(--grey-transparent);--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-null);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-null);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxsmall);--chip-padding-right: var(--size-pos-xxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-xlarge);--chip-text-color-default: var(--sketch-color-foreground-inverted);--chip-text-color-hover: var(--sketch-color-foreground-inverted);--chip-text-color-inactive: var(--sketch-color-foreground-secondary);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xsmall);--chip-text-transform: none;--chip-text-weight-default: var(--font-weight-medium);--chip-text-weight-on-background: var(--font-weight-normal)}:root[data-theme=figma]{--chip-background-color-default: var(--figma-color-bg-selected-secondary);--chip-background-color-hover: var(--figma-color-bg-selected-default);--chip-background-color-inactive: var(--figma-color-bg-tertiary);--chip-background-color-on-background: rgb(100% 100% 100% / .4);--chip-border-color-default: var(--grey-transparent);--chip-border-color-hover: var(--grey-transparent);--chip-border-color-inactive: var(--grey-transparent);--chip-border-color-on-background: var(--grey-transparent);--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-null);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-null);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxxsmall);--chip-padding-right: var(--size-pos-xxxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-small);--chip-text-color-default: var(--figma-color-text-brand-default);--chip-text-color-hover: var(--figma-color-text-brand-default);--chip-text-color-inactive: var(--figma-color-text-default);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xxsmall);--chip-text-transform: none;--chip-text-weight-default: var(--font-weight-accent);--chip-text-weight-on-background: var(--font-weight-normal)}:root[data-theme=framer]{--chip-background-color-default: var(--framer-color-tint-dimmed);--chip-background-color-hover: var(--framer-color-tint-default);--chip-background-color-inactive: var(--framer-color-bg-secondary);--chip-background-color-on-background: rgb(100% 100% 100% / .4);--chip-border-color-default: var(--grey-transparent);--chip-border-color-hover: var(--grey-transparent);--chip-border-color-inactive: var(--grey-transparent);--chip-border-color-on-background: var(--grey-transparent);--chip-border-offset-default: var(--size-null);--chip-border-offset-hover: var(--size-null);--chip-border-offset-inactive: var(--size-null);--chip-border-offset-on-background: var(--size-null);--chip-border-width-default: var(--size-null);--chip-border-width-hover: var(--size-null);--chip-border-width-inactive: var(--size-null);--chip-border-width-on-background: var(--size-null);--chip-gap: var(--size-pos-xxxsmall);--chip-height: var(--size-pos-xsmall);--chip-margin-bottom: var(--size-null);--chip-margin-left: var(--size-pos-xxsmall);--chip-margin-right: var(--size-null);--chip-margin-top: var(--size-null);--chip-padding-bottom: var(--size-null);--chip-padding-left: var(--size-pos-xxxsmall);--chip-padding-right: var(--size-pos-xxxsmall);--chip-padding-top: var(--size-null);--chip-radius: var(--border-radius-medium);--chip-text-color-default: var(--framer-color-tint-default);--chip-text-color-hover: var(--framer-color-text-reversed);--chip-text-color-inactive: var(--framer-color-text-tertiary);--chip-text-color-on-background: var(--grey-1000);--chip-text-letter-spacing: var(--font-letter-spacing-pos-xlarge);--chip-text-size: var(--font-size-xxsmall);--chip-text-transform: uppercase;--chip-text-weight-default: var(--font-weight-bold);--chip-text-weight-on-background: var(--font-weight-accent)}.chip{display:inline-flex;position:relative;align-items:center;gap:var(--chip-gap);cursor:default;box-sizing:border-box;margin:var(--chip-margin-top) var(--chip-margin-right) var(--chip-margin-bottom) var(--chip-margin-left);outline:var(--chip-border-width) solid var(--chip-border-color);outline-offset:var(--chip-border-offset);border-radius:var(--chip-radius);background-color:var(--chip-background-color);padding:var(--chip-padding-top) var(--chip-padding-right) var(--chip-padding-bottom) var(--chip-padding-left);max-width:100%;height:var(--chip-height);-webkit-user-select:none;user-select:none}.chip--interactive{pointer-events:auto}.chip--interactive{--chip-background-color: var(--chip-background-color-default);--chip-border-color: var(--chip-border-color-default);--chip-border-offset: var(--chip-border-offset-default);--chip-border-width: var(--chip-border-width-default);--chip-text-color: var(--chip-text-color-default)}.chip--interactive:hover,.chip--interactive:focus{--chip-background-color: var(--chip-background-color-hover);--chip-border-color: var(--chip-border-color-hover);--chip-border-offset: var(--chip-border-offset-hover);--chip-border-width: var(--chip-border-width-hover);--chip-text-color: var(--chip-text-color-hover)}.chip .chip__text{color:var(--chip-text-color);font-weight:var(--chip-text-weight);font-size:var(--chip-text-size);letter-spacing:var(--chip-text-letter-spacing);text-transform:var(--chip-text-transform);text-wrap:nowrap}.chip .chip__left-slot,.chip .chip__right-slot{display:flex}.chip{--chip-background-color: var(--chip-background-color-default);--chip-border-color: var(--chip-border-color-default);--chip-border-width: var(--chip-border-width-default);--chip-border-offset: var(--chip-border-offset-default);--chip-text-color: var(--chip-text-color-default);--chip-text-weight: var(--chip-text-weight-default)}.chip--inactive{--chip-background-color: var(--chip-background-color-inactive);--chip-border-color: var(--chip-border-color-inactive);--chip-border-width: var(--chip-border-width-inactive);--chip-border-offset: var(--chip-border-offset-inactive);--chip-text-color: var(--chip-text-color-inactive)}.chip--solo{margin:0}.chip--on-background{margin:0;--chip-background-color: var(--chip-background-color-on-background);--chip-border-color: var(--chip-border-color-on-background);--chip-border-width: var(--chip-border-width-on-background);--chip-border-offset: var(--chip-border-offset-on-background);--chip-text-color: var(--chip-text-color-on-background);--chip-text-weight: var(--chip-text-weight-on-background)}