@simai-studio/ui 5.20261020.1738 → 5.20261020.2238

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 (45) hide show
  1. package/README.md +4 -4
  2. package/distr/component/admin-menu/css/admin-menu.min.css +1 -1
  3. package/distr/component/badges/css/badges.min.css +1 -1
  4. package/distr/component/badges/js/badges.min.js +1 -1
  5. package/distr/component/buttons/js/buttons.min.js +1 -1
  6. package/distr/component/context-menu/css/context-menu.min.css +1 -1
  7. package/distr/component/dropdown/css/dropdown.min.css +1 -1
  8. package/distr/component/icon-buttons/css/icon-buttons.min.css +1 -1
  9. package/distr/component/icon-buttons/js/icon-buttons.min.js +1 -1
  10. package/distr/component/menu/css/menu.min.css +1 -1
  11. package/distr/component/modal/css/modal.min.css +1 -1
  12. package/distr/component/modal/js/modal.min.js +1 -1
  13. package/distr/component/spinner/css/spinner.min.css +1 -1
  14. package/distr/component/spinner/js/spinner.min.js +1 -1
  15. package/distr/component/toast/css/toast.min.css +1 -1
  16. package/distr/core/contracts/public-js-api.json +12 -0
  17. package/distr/core/contracts/public-variables.v1.json +7 -0
  18. package/distr/core/contracts/public-variables.v1.schema.json +2 -1
  19. package/distr/core/js/core-rules.js +13 -0
  20. package/distr/core/js/core-rules.min.js +1 -1
  21. package/distr/rule/js/rule.min.js +1 -1
  22. package/distr/rule/rule.json +10 -0
  23. package/distr/smart/avatar/js/avatar.min.js +11 -7
  24. package/distr/smart/avatar/smart.manifest.json +24 -2
  25. package/distr/smart/avatar/template/shared.js +3 -2
  26. package/distr/smart/avatars/js/avatars.min.js +4 -4
  27. package/distr/smart/button-group/js/button-group.min.js +1 -1
  28. package/distr/smart/buttons/js/buttons.min.js +1 -1
  29. package/distr/smart/context-menu/smart.manifest.json +1 -1
  30. package/distr/smart/drawer/css/drawer.min.css +1 -1
  31. package/distr/smart/drawer/smart.manifest.json +1 -1
  32. package/distr/smart/icon-buttons/js/icon-buttons.min.js +15 -11
  33. package/distr/smart/icon-buttons/smart.manifest.json +23 -2
  34. package/distr/smart/icon-buttons/template/default.js +4 -2
  35. package/distr/smart/icons/js/icons.min.js +17 -7
  36. package/distr/smart/icons/smart.manifest.json +26 -5
  37. package/distr/smart/icons/template/default.js +17 -0
  38. package/distr/smart/modal/js/modal.min.js +1 -1
  39. package/distr/smart/popover/css/popover.min.css +1 -1
  40. package/distr/smart/popover/smart.manifest.json +1 -1
  41. package/distr/smart/popover/template/default.css +1 -0
  42. package/distr/smart/spinner/js/spinner.min.js +1 -1
  43. package/distr/smart/spinner/smart.manifest.json +1 -1
  44. package/package-manifest.json +45 -45
  45. package/package.json +4 -4
package/distr/component/icon-buttons/css/icon-buttons.min.css CHANGED
@@ -1 +1 @@
1
- @property --sf-icon-button--border-top-width{syntax:"<length>";inherits:true;initial-value:0px}@property --sf-icon-button--border-bottom-width{syntax:"<length>";inherits:true;initial-value:0px}@property --sf-icon-button--border-inline-start-width{syntax:"<length>";inherits:true;initial-value:0px}@property --sf-icon-button--border-inline-end-width{syntax:"<length>";inherits:true;initial-value:0px}@layer sf.components{_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}}.sf-icon-button:where(:dir(ltr)){padding-left:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}}.sf-icon-button:where(:dir(rtl)){padding-right:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}}.sf-icon-button:where(:dir(ltr)){padding-right:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}}.sf-icon-button:where(:dir(rtl)){padding-left:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-end-width, 0)}@supports not (border-inline-end-width: initial){html:not([dir="rtl"]) .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-end-width, 0)}}.sf-icon-button:where(:dir(ltr)){border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-end-width, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-end-width, 0)}@supports not (border-inline-end-width: initial){[dir="rtl"] .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-end-width, 0)}}.sf-icon-button:where(:dir(rtl)){border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-end-width, 0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-start-width, 0)}@supports not (border-inline-start-width: initial){html:not([dir="rtl"]) .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-start-width, 0)}}.sf-icon-button:where(:dir(ltr)){border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-start-width, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-start-width, 0)}@supports not (border-inline-start-width: initial){[dir="rtl"] .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-start-width, 0)}}.sf-icon-button:where(:dir(rtl)){border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-start-width, 0)}.sf-icon-button{color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));--sf-icon-button--radius: var(--sf-icon-button-radius, var(--sf-radius--ui));border-end-end-radius:var(--sf-icon-button--radius);border-end-end-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));border-end-start-radius:var(--sf-icon-button--radius);border-end-start-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));border-start-end-radius:var(--sf-icon-button--radius);border-start-end-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));border-start-start-radius:var(--sf-icon-button--radius);border-start-start-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));-webkit-padding-start:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));padding-inline-start:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));padding-top:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));-webkit-padding-end:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));padding-inline-end:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));padding-bottom:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));--sf-icon-button--border-top-width: var(--sf-icon-button-border-width, 0);--sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, 0);--sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, 0);--sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, 0);background-color:var(--sf-icon-button--background-color);border-color:transparent;border-color:var(--sf-icon-button--border-color, var(--sf-icon-button-border-color, transparent));border-width:0;border-width:var(--sf-icon-button--border-width, 0);border-top-width:0;border-top-width:var(--sf-icon-button--border-top-width, 0);border-inline-end-width:0;border-inline-end-width:var(--sf-icon-button--border-inline-end-width, 0);border-bottom-width:0;border-bottom-width:var(--sf-icon-button--border-bottom-width, 0);border-inline-start-width:0;border-inline-start-width:var(--sf-icon-button--border-inline-start-width, 0);border-style:solid;border-style:var(--sf-icon-button--border-style, solid);box-shadow:0 0 rgba(0, 0, 0, 0),0 0 rgba(0, 0, 0, 0);box-shadow:var(--sf-icon-button--focus-inset, 0 0 rgba(0, 0, 0, 0)),var(--sf-icon-button--box-shadow, 0 0 rgba(0, 0, 0, 0))}.sf-icon-button .sf-close-icon{background-color:var(--sf-close-icon--background-color);border-color:transparent;border-color:var(--sf-close-icon--border-color, transparent)}.sf-icon-button .sf-icon{color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));font-size:var(--sf-icon-size-3);font-size:var(--sf-icon--font-size, var(--sf-icon-size-3));height:var(--sf-icon-size-3);height:var(--sf-icon--height, var(--sf-icon-size-3));width:var(--sf-icon-size-3);width:var(--sf-icon--width, var(--sf-icon-size-3))}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-secondary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-secondary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);--sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface-inverse))}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-secondary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface-inverse))}.sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-3);--sf-icon--height: var(--sf-text-height-3);--sf-icon--width: var(--sf-text-height-3)}.sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-3);--sf-icon--height: var(--sf-text-height-3);--sf-icon--width: var(--sf-text-height-3)}.sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-1\/3);--sf-icon--height: var(--sf-text-height-1\/3);--sf-icon--width: var(--sf-text-height-1\/3)}.sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-1\/3);--sf-icon--height: var(--sf-text-height-1\/3);--sf-icon--width: var(--sf-text-height-1\/3)}.sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-icon-button--size-1{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default))}.sf-icon-button--size-1.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low))}.sf-icon-button--size-1.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low))}.sf-icon-button--size-1.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high))}.sf-icon-button--size-1.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high))}.sf-icon-button--size-1.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest))}.sf-icon-button--size-1.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest))}.sf-icon-button--size-2{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default))}.sf-icon-button--size-2.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low))}.sf-icon-button--size-2.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low))}.sf-icon-button--size-2.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high))}.sf-icon-button--size-2.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high))}.sf-icon-button--size-2.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest))}.sf-icon-button--size-2.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest))}.sf-icon-button--size-3{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default))}.sf-icon-button--size-3.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low))}.sf-icon-button--size-3.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low))}.sf-icon-button--size-3.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high))}.sf-icon-button--size-3.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high))}.sf-icon-button--size-3.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest))}.sf-icon-button--size-3.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest))}.sf-icon-button--size-1\/2{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default))}.sf-icon-button--size-1\/2.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low))}.sf-icon-button--size-1\/2.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low))}.sf-icon-button--size-1\/2.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high))}.sf-icon-button--size-1\/2.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high))}.sf-icon-button--size-1\/2.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest))}.sf-icon-button--size-1\/2.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest))}.sf-icon-button--size-1\/3{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default))}.sf-icon-button--size-1\/3.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low))}.sf-icon-button--size-1\/3.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low))}.sf-icon-button--size-1\/3.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high))}.sf-icon-button--size-1\/3.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high))}.sf-icon-button--size-1\/3.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest))}.sf-icon-button--size-1\/3.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest))}.sf-icon-button--outline{--sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-style: solid;--sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px))}.sf-icon-button.radius-default{border-radius:var(--sf-radius-default)}.sf-icon-button.radius-square{border-radius:var(--sf-radius-square)}.sf-icon-button.radius-rounded{border-radius:var(--sf-radius-rounded)}.sf-icon-button.segment-start{--sf-icon-button--border-top-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-inline-end-width: var(--sf-px)}.sf-icon-button.segment-middle{--sf-icon-button--border-top-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);--sf-icon-button--border-inline-start-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button.segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){html:not([dir="rtl"]) .sf-icon-button.segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button.segment-end:where(:dir(ltr)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button.segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){[dir="rtl"] .sf-icon-button.segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button.segment-end:where(:dir(rtl)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button.segment-end{--sf-icon-button--border-top-left-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);border-inline-start-color:transparent;border-inline-start-color:var(--sf-white--alfa-24, transparent);--sf-icon-button--border-inline-start-width: var(--sf-px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(ltr)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(rtl)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button:not(.sf-icon-button--outline).segment-end{border-inline-start-color:transparent;border-inline-start-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(ltr)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(rtl)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button:not(.sf-icon-button--outline).segment-start{border-inline-end-color:transparent;border-inline-end-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-inline-end-color:transparent;border-inline-end-color:var(--sf-white--alfa-24, transparent);border-inline-start-color:transparent;border-inline-start-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button.sf-icon-button--surface{--sf-icon-button--background-color: transparent}.sf-icon-button.sf-icon-button--surface{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-alpha-4));--sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-alpha-8));--sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-style: solid;--sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--primary{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary))}}@layer sf.states{.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled{--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-hover)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-secondary-container-hover)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-primary-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-secondary-container-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-on-surface-hover)}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-on-surface-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset);--sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent)}.sf-icon-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset);--sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary{--sf-icon-button--focus-ink: var(--sf-on-primary)}.sf-icon-button.segment-start:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.segment-middle:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.segment-end:not(:disabled):not(.disabled).focus-visible{outline-offset:calc(var(--sf-focus--width)*-1)}.sf-icon-button.segment-start:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.segment-middle:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.segment-end:not(:disabled):not(.disabled):focus-visible{outline-offset:calc(var(--sf-focus--width)*-1)}@media(forced-colors: active){.sf-icon-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:calc(var(--sf-focus-outline-width)*-1)}.sf-icon-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:calc(var(--sf-focus-outline-width)*-1)}}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-alpha-8)}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover{--sf-icon-button--border-color: var(--sf-alpha-12)}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-alpha-12)}.sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-alpha-12)}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active{--sf-icon-button--border-color: var(--sf-alpha-16)}.sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled){--sf-icon-button--border-color: var(--sf-alpha-16)}.sf-icon-button.sf-icon-button--surface:disabled,.sf-icon-button.sf-icon-button--surface.disabled{--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-alpha-4)}.sf-icon-button.sf-icon-button--surface:disabled,.sf-icon-button.sf-icon-button--surface.disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--surface:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--surface.disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}}@layer sf.components{.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error))}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);--sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-error))}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active))}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error))}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active))}}@layer sf.states{.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled{--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-hover)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-error-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error{--sf-icon-button--focus-ink: var(--sf-on-error)}}@layer sf.override{sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)]+sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(.sf-icon-button--outline[class*=segment-])+sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)]+sf-button .sf-button[class*=segment-]:not(.sf-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-button[class*=segment-]:not(.sf-button--outline){--sf-button--border-top-width: var(--sf-px);--sf-button--border-inline-end-width: var(--sf-px);--sf-button--border-bottom-width: var(--sf-px);--sf-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(.sf-icon-button--outline[class*=segment-])+sf-button .sf-button[class*=segment-]:not(.sf-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-button[class*=segment-]:not(.sf-button--outline){--sf-button--border-top-width: var(--sf-px);--sf-button--border-inline-end-width: var(--sf-px);--sf-button--border-bottom-width: var(--sf-px);--sf-button--border-inline-start-width: var(--sf-px)}sf-icon-button[\:has\(\%2Bsf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)]{--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(+sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+.sf-icon-button.sf-icon-button--outline[class*=segment-]){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button[\:has\(\%2Bsf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]{--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(+sf-button .sf-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+.sf-button.sf-button--outline[class*=segment-]){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}}@layer sf.components{.sf-icon-button>*{position:relative;z-index:1}.sf-icon-button.loading,.sf-icon-button.sf-icon-button-state-loading{pointer-events:none;position:relative}.sf-icon-button.loading::after,.sf-icon-button.sf-icon-button-state-loading::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background-image:repeating-linear-gradient(135deg, transparent 0, transparent var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));background-image:repeating-linear-gradient(135deg, var(--sf-icon-button-loading-stripe, transparent) 0, var(--sf-icon-button-loading-stripe, transparent) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));border-radius:inherit;pointer-events:none}.sf-icon-button{--sf-icon-button-spinner--size: var(--sf-icon-size-3)}.sf-icon-button.sf-icon-button--size-1\/3{--sf-icon-button-spinner--size: var(--sf-text-height-1\/3)}.sf-icon-button.sf-icon-button--size-1\/2{--sf-icon-button-spinner--size: var(--sf-text-height-1\/2)}.sf-icon-button.sf-icon-button--size-1{--sf-icon-button-spinner--size: var(--sf-text-height-1)}.sf-icon-button.sf-icon-button--size-2{--sf-icon-button-spinner--size: var(--sf-text-height-2)}.sf-icon-button.sf-icon-button--size-3{--sf-icon-button-spinner--size: var(--sf-text-height-3)}.sf-icon-button .sf-icon-button-spinner{--sf-loader-svg-width: var(--sf-icon-button-spinner--size);--sf-loader-svg-height: var(--sf-icon-button-spinner--size);display:inline-flex;vertical-align:bottom;flex:none;width:var(--sf-icon-button-spinner--size);inline-size:var(--sf-icon-button-spinner--size);height:var(--sf-icon-button-spinner--size);block-size:var(--sf-icon-button-spinner--size);color:currentColor;color:var(--sf-loader--color, currentColor)}.sf-icon-button .sf-icon-button-spinner .sf-loader--loading-indicator{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}.sf-icon-button .sf-icon-button-spinner .sf-loader-svg{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}}@layer sf.states{.sf-icon-button:disabled .sf-icon-button-spinner{color:var(--sf-on-disable);color:var(--sf-loader--color, var(--sf-on-disable))}.sf-icon-button.disabled .sf-icon-button-spinner{color:var(--sf-on-disable);color:var(--sf-loader--color, var(--sf-on-disable))}}
1
+ @property --sf-icon-button--border-top-width{syntax:"<length>";inherits:true;initial-value:0px}@property --sf-icon-button--border-bottom-width{syntax:"<length>";inherits:true;initial-value:0px}@property --sf-icon-button--border-inline-start-width{syntax:"<length>";inherits:true;initial-value:0px}@property --sf-icon-button--border-inline-end-width{syntax:"<length>";inherits:true;initial-value:0px}@layer sf.components{_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-bottom-left-radius:var(--sf-icon-button--radius);border-bottom-left-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-icon-button{border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-bottom-right-radius:var(--sf-icon-button--radius);border-bottom-right-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-icon-button{border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(ltr)){border-top-left-radius:var(--sf-icon-button--radius);border-top-left-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-icon-button{border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}}.sf-icon-button:where(:dir(rtl)){border-top-right-radius:var(--sf-icon-button--radius);border-top-right-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}}.sf-icon-button:where(:dir(ltr)){padding-left:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}}.sf-icon-button:where(:dir(rtl)){padding-right:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-icon-button{padding-right:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}}.sf-icon-button:where(:dir(ltr)){padding-right:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-icon-button{padding-left:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}}.sf-icon-button:where(:dir(rtl)){padding-left:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-end-width, 0)}@supports not (border-inline-end-width: initial){html:not([dir="rtl"]) .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-end-width, 0)}}.sf-icon-button:where(:dir(ltr)){border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-end-width, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-end-width, 0)}@supports not (border-inline-end-width: initial){[dir="rtl"] .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-end-width, 0)}}.sf-icon-button:where(:dir(rtl)){border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-end-width, 0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-start-width, 0)}@supports not (border-inline-start-width: initial){html:not([dir="rtl"]) .sf-icon-button{border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-start-width, 0)}}.sf-icon-button:where(:dir(ltr)){border-left-width:0;border-left-width:var(--sf-icon-button--border-inline-start-width, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-start-width, 0)}@supports not (border-inline-start-width: initial){[dir="rtl"] .sf-icon-button{border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-start-width, 0)}}.sf-icon-button:where(:dir(rtl)){border-right-width:0;border-right-width:var(--sf-icon-button--border-inline-start-width, 0)}.sf-icon-button{color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));--sf-icon-button--radius: var(--sf-icon-button-radius, var(--sf-radius--ui));border-end-end-radius:var(--sf-icon-button--radius);border-end-end-radius:var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));border-end-start-radius:var(--sf-icon-button--radius);border-end-start-radius:var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));border-start-end-radius:var(--sf-icon-button--radius);border-start-end-radius:var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));border-start-start-radius:var(--sf-icon-button--radius);border-start-start-radius:var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));-webkit-padding-start:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));padding-inline-start:calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));padding-top:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));-webkit-padding-end:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));padding-inline-end:calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));padding-bottom:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));--sf-icon-button--border-top-width: var(--sf-icon-button-border-width, 0);--sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, 0);--sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, 0);--sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, 0);background-color:var(--sf-icon-button--background-color);border-color:transparent;border-color:var(--sf-icon-button--border-color, var(--sf-icon-button-border-color, transparent));border-width:0;border-width:var(--sf-icon-button--border-width, 0);border-top-width:0;border-top-width:var(--sf-icon-button--border-top-width, 0);border-inline-end-width:0;border-inline-end-width:var(--sf-icon-button--border-inline-end-width, 0);border-bottom-width:0;border-bottom-width:var(--sf-icon-button--border-bottom-width, 0);border-inline-start-width:0;border-inline-start-width:var(--sf-icon-button--border-inline-start-width, 0);border-style:solid;border-style:var(--sf-icon-button--border-style, solid);box-shadow:0 0 rgba(0, 0, 0, 0),0 0 rgba(0, 0, 0, 0);box-shadow:var(--sf-icon-button--focus-inset, 0 0 rgba(0, 0, 0, 0)),var(--sf-icon-button--box-shadow, 0 0 rgba(0, 0, 0, 0))}.sf-icon-button .sf-close-icon{background-color:var(--sf-close-icon--background-color);border-color:transparent;border-color:var(--sf-close-icon--border-color, transparent)}.sf-icon-button .sf-icon{color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));font-size:var(--sf-icon-size-3);font-size:var(--sf-icon--font-size, var(--sf-icon-size-3));height:var(--sf-icon-size-3);height:var(--sf-icon--height, var(--sf-icon-size-3));width:var(--sf-icon-size-3);width:var(--sf-icon--width, var(--sf-icon-size-3))}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-secondary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-secondary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);--sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface-inverse))}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-secondary-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active))}.sf-icon-button.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface-inverse))}.sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-3);--sf-icon--height: var(--sf-text-height-3);--sf-icon--width: var(--sf-text-height-3)}.sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-3);--sf-icon--height: var(--sf-text-height-3);--sf-icon--width: var(--sf-text-height-3)}.sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-1\/3);--sf-icon--height: var(--sf-text-height-1\/3);--sf-icon--width: var(--sf-text-height-1\/3)}.sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-1\/3);--sf-icon--height: var(--sf-text-height-1\/3);--sf-icon--width: var(--sf-text-height-1\/3)}.sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon .sf-icon:not(does-not-exist){--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon sf-icon:not(:defined){--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-icon-button--size-1{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default))}.sf-icon-button--size-1.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low))}.sf-icon-button--size-1.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low))}.sf-icon-button--size-1.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high))}.sf-icon-button--size-1.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high))}.sf-icon-button--size-1.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest))}.sf-icon-button--size-1.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest))}.sf-icon-button--size-2{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default))}.sf-icon-button--size-2.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low))}.sf-icon-button--size-2.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low))}.sf-icon-button--size-2.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high))}.sf-icon-button--size-2.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high))}.sf-icon-button--size-2.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest))}.sf-icon-button--size-2.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest))}.sf-icon-button--size-3{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default))}.sf-icon-button--size-3.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low))}.sf-icon-button--size-3.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low))}.sf-icon-button--size-3.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high))}.sf-icon-button--size-3.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high))}.sf-icon-button--size-3.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest))}.sf-icon-button--size-3.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest))}.sf-icon-button--size-1\/2{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default))}.sf-icon-button--size-1\/2.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low))}.sf-icon-button--size-1\/2.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low))}.sf-icon-button--size-1\/2.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high))}.sf-icon-button--size-1\/2.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high))}.sf-icon-button--size-1\/2.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest))}.sf-icon-button--size-1\/2.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest))}.sf-icon-button--size-1\/3{--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default))}.sf-icon-button--size-1\/3.tightness-low{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low))}.sf-icon-button--size-1\/3.spacing-compact{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low))}.sf-icon-button--size-1\/3.tightness-high{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high))}.sf-icon-button--size-1\/3.spacing-comfortable{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high))}.sf-icon-button--size-1\/3.tightness-highest{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest))}.sf-icon-button--size-1\/3.spacing-spacious{--sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));--sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest))}.sf-icon-button--outline{--sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-style: solid;--sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px))}.sf-icon-button.radius-default{border-radius:var(--sf-radius-default);--sf-icon-button--anchor-radius: var(--sf-radius-default)}.sf-icon-button.radius-square{border-radius:var(--sf-radius-square)}.sf-icon-button.radius-rounded{border-radius:var(--sf-radius-rounded)}.sf-icon-button.segment-start{--sf-icon-button--border-top-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-inline-end-width: var(--sf-px)}.sf-icon-button.segment-middle{--sf-icon-button--border-top-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);--sf-icon-button--border-inline-start-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button.segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){html:not([dir="rtl"]) .sf-icon-button.segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button.segment-end:where(:dir(ltr)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button.segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){[dir="rtl"] .sf-icon-button.segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button.segment-end:where(:dir(rtl)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button.segment-end{--sf-icon-button--border-top-left-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);border-inline-start-color:transparent;border-inline-start-color:var(--sf-white--alfa-24, transparent);--sf-icon-button--border-inline-start-width: var(--sf-px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(ltr)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(rtl)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button:not(.sf-icon-button--outline).segment-end{border-inline-start-color:transparent;border-inline-start-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(ltr)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(rtl)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button:not(.sf-icon-button--outline).segment-start{border-inline-end-color:transparent;border-inline-end-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-end-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)){border-left-color:transparent;border-left-color:var(--sf-white--alfa-24, transparent)}_:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}@supports not (border-inline-start-color: initial){[dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}}.sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)){border-right-color:transparent;border-right-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button:not(.sf-icon-button--outline).segment-middle{border-inline-end-color:transparent;border-inline-end-color:var(--sf-white--alfa-24, transparent);border-inline-start-color:transparent;border-inline-start-color:var(--sf-white--alfa-24, transparent)}.sf-icon-button.sf-icon-button--surface{--sf-icon-button--background-color: transparent}.sf-icon-button.sf-icon-button--surface{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-alpha-4));--sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-alpha-8));--sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-style: solid;--sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));--sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--primary{--sf-icon--color: var(--sf-icon-button-color, var(--sf-primary))}.sf-icon-button.sf-icon-button--surface.sf-icon-button--primary.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary))}}@layer sf.states{.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled{--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-hover)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-secondary-container-hover)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-primary-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-surface-container-hover)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-primary-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-secondary-container-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-primary-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-surface-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-on-surface-hover)}.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-on-surface-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset);--sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent)}.sf-icon-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset);--sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent)}.sf-icon-button.sf-icon-button--default.sf-icon-button--primary{--sf-icon-button--focus-ink: var(--sf-on-primary)}.sf-icon-button.segment-start:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.segment-middle:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.segment-end:not(:disabled):not(.disabled).focus-visible{outline-offset:calc(var(--sf-focus--width)*-1)}.sf-icon-button.segment-start:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.segment-middle:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.segment-end:not(:disabled):not(.disabled):focus-visible{outline-offset:calc(var(--sf-focus--width)*-1)}@media(forced-colors: active){.sf-icon-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:calc(var(--sf-focus-outline-width)*-1)}.sf-icon-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:calc(var(--sf-focus-outline-width)*-1)}}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-alpha-8)}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover{--sf-icon-button--border-color: var(--sf-alpha-12)}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-alpha-12)}.sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-alpha-12)}.sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active{--sf-icon-button--border-color: var(--sf-alpha-16)}.sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled){--sf-icon-button--border-color: var(--sf-alpha-16)}.sf-icon-button.sf-icon-button--surface:disabled,.sf-icon-button.sf-icon-button--surface.disabled{--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-alpha-4)}.sf-icon-button.sf-icon-button--surface:disabled,.sf-icon-button.sf-icon-button--surface.disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--surface:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--surface.disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}}@layer sf.components{.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error))}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error-container))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);--sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-error))}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close{--sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon{--sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active))}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error))}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error-container))}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error))}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active))}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active))}}@layer sf.states{.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled{--sf-icon-button--background-color: var(--sf-disable)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled{--sf-icon--color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled{--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-hover)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover{--sf-icon-button--background-color: var(--sf-error-container-hover)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-error-active)}.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active{--sf-icon-button--background-color: var(--sf-error-container-active)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled){--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible{--sf-icon-button--background-color: var(--sf-transparent-for-focus)}.sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon,.sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-disable)}.sf-icon-button.sf-icon-button--default.sf-icon-button--error{--sf-icon-button--focus-ink: var(--sf-on-error)}}@layer sf.override{sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)]+sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(.sf-icon-button--outline[class*=segment-])+sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)]+sf-button .sf-button[class*=segment-]:not(.sf-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-button[class*=segment-]:not(.sf-button--outline){--sf-button--border-top-width: var(--sf-px);--sf-button--border-inline-end-width: var(--sf-px);--sf-button--border-bottom-width: var(--sf-px);--sf-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(.sf-icon-button--outline[class*=segment-])+sf-button .sf-button[class*=segment-]:not(.sf-button--outline),.sf-icon-button.sf-icon-button--outline[class*=segment-]+.sf-button[class*=segment-]:not(.sf-button--outline){--sf-button--border-top-width: var(--sf-px);--sf-button--border-inline-end-width: var(--sf-px);--sf-button--border-bottom-width: var(--sf-px);--sf-button--border-inline-start-width: var(--sf-px)}sf-icon-button[\:has\(\%2Bsf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)]{--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(+sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+.sf-icon-button.sf-icon-button--outline[class*=segment-]){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button[\:has\(\%2Bsf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]{--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}sf-icon-button:has(+sf-button .sf-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),.sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+.sf-button.sf-button--outline[class*=segment-]){--sf-icon-button--border-top-width: var(--sf-px);--sf-icon-button--border-inline-end-width: var(--sf-px);--sf-icon-button--border-bottom-width: var(--sf-px);--sf-icon-button--border-inline-start-width: var(--sf-px)}}@layer sf.components{.sf-icon-button>*{position:relative;z-index:1}.sf-icon-button.loading,.sf-icon-button.sf-icon-button-state-loading{pointer-events:none;position:relative}.sf-icon-button.loading::after,.sf-icon-button.sf-icon-button-state-loading::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background-image:repeating-linear-gradient(135deg, transparent 0, transparent var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));background-image:repeating-linear-gradient(135deg, var(--sf-icon-button-loading-stripe, transparent) 0, var(--sf-icon-button-loading-stripe, transparent) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));border-radius:inherit;pointer-events:none}.sf-icon-button{--sf-icon-button-spinner--size: var(--sf-icon-size-3)}.sf-icon-button.sf-icon-button--size-1\/3{--sf-icon-button-spinner--size: var(--sf-text-height-1\/3)}.sf-icon-button.sf-icon-button--size-1\/2{--sf-icon-button-spinner--size: var(--sf-text-height-1\/2)}.sf-icon-button.sf-icon-button--size-1{--sf-icon-button-spinner--size: var(--sf-text-height-1)}.sf-icon-button.sf-icon-button--size-2{--sf-icon-button-spinner--size: var(--sf-text-height-2)}.sf-icon-button.sf-icon-button--size-3{--sf-icon-button-spinner--size: var(--sf-text-height-3)}.sf-icon-button .sf-icon-button-spinner{--sf-loader-svg-width: var(--sf-icon-button-spinner--size);--sf-loader-svg-height: var(--sf-icon-button-spinner--size);display:inline-flex;vertical-align:bottom;flex:none;width:var(--sf-icon-button-spinner--size);inline-size:var(--sf-icon-button-spinner--size);height:var(--sf-icon-button-spinner--size);block-size:var(--sf-icon-button-spinner--size);color:currentColor;color:var(--sf-loader--color, currentColor)}.sf-icon-button .sf-icon-button-spinner .sf-loader--loading-indicator{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}.sf-icon-button .sf-icon-button-spinner .sf-loader-svg{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}}@layer sf.states{.sf-icon-button:disabled .sf-icon-button-spinner{color:var(--sf-on-disable);color:var(--sf-loader--color, var(--sf-on-disable))}.sf-icon-button.disabled .sf-icon-button-spinner{color:var(--sf-on-disable);color:var(--sf-loader--color, var(--sf-on-disable))}}
package/distr/component/icon-buttons/js/icon-buttons.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{"use strict";class t{lifecycleName(){return this.componentName??this.constructor.componentName}constructor(t){this.props=t,this.id=t?.id,this.params=t?.param,this.attrs=t?.attrs||{},this.template=null,window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:beforeRender`,{detail:this}))}getUtilityMap(){return this.constructor.utilityMap||null}extractUtilityClasses(t){if(!Array.isArray(t))return[];const e=new Set;return t.forEach(t=>{if("string"!=typeof t)return;const s=t.match(/\(([^)]+)\)/g);s&&s.forEach(t=>{t.slice(1,-1).split(/\s+/).filter(Boolean).forEach(t=>{t.startsWith(".")&&t.length>1&&e.add(t.slice(1))})})}),Array.from(e)}applyLayoutUtilities(t,e){if(!t||!e)return;const s=this.getUtilityMap();if(!s||!s[e])return;this.extractUtilityClasses(s[e]).forEach(e=>t.classList.add(e))}render(){return this.html=this.template,"function"==typeof this.init&&this.init(),this.html&&window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:render`,{detail:this})),this.html}destroy(){this.destroyInternal?.(),this.props=null,this.id=null,this.params=null,this.template=null,this.html&&(this.html.remove(),this.html=null),window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:destroy`,{detail:this}))}destroyInternal(){}}const e=JSON.parse('{".sf-icon-button":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/center (.justify-center)","align-items/center (.items-center)"],".sf-icon-button .sf-icon":["display/flex (.flex)","justify-content/center (.justify-center)","align-items/center (.items-center)"]}');const s=function(t,e){if(t&&e)if("undefined"==typeof window||"function"!=typeof window.registerSfComponent){if("undefined"!=typeof window&&window.SF?.Loader?.registerComponent)window.SF.Loader.registerComponent(t,e);else if("undefined"!=typeof window){(window.SF_PENDING_COMPONENTS=window.SF_PENDING_COMPONENTS||[]).push([t,e])}}else window.registerSfComponent(t,e)};function i(t,e={}){const s=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{null!=e&&""!==e&&s.setAttribute(t,String(e))}),s}const n=t=>Math.round(1e3*t)/1e3;function o(t={}){return function({width:t=24,height:e=24,stroke:s=2,dots:o=8,filled:a=3,dotRadius:r=null,direction:l="clockwise",pixel:c=!1}={}){const d=t/2,u=e/2,h=Math.min(t,e)/2,f=Math.max(1,h-s/2),p=i("svg",{class:"sf-loader-svg",viewBox:`0 0 ${t} ${e}`,width:c?t:null,height:c?e:null,"aria-hidden":"true",focusable:"false"}),m={cx:d,cy:u,r:n(f),fill:"none",stroke:"currentColor","stroke-width":s},y=i("circle",{class:"sf-loader-ring-filled",...m,opacity:"0.3"}),b=i("circle",{class:"sf-loader-ring-accent",...m,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"0 100",transform:`rotate(90 ${d} ${u})`}),w=i("g",{class:"sf-loader-comet",display:"none",transform:`rotate(-90 ${d} ${u})`});for(let t=0;t<10;t+=1){const e=9===t;w.append(i("circle",{class:"sf-loader-comet-segment"+(e?" sf-loader-comet-head":""),...m,"stroke-linecap":e?"round":"butt",pathLength:100,"stroke-dasharray":`${n(4)} ${n(96)}`,"stroke-dashoffset":n(-4*t),opacity:n(((t+1)/10)**1.6)}))}const g=Math.max(3,Math.min(32,Math.floor(Number(o)||8))),E=Math.max(1,Math.min(g,Math.floor(Number(a)||3))),N=Math.min(s,.7*Math.PI*(h-s)/g),M=null==r||""===r?N:Math.max(1,Math.min(Number(r)||N,h/4)),x=Math.max(M,h-M),$=i("g",{class:"sf-loader-dots",display:"none",style:`--sf-loader-dot-count:${g}; --sf-loader-dot-filled:${E};`});for(let t=0;t<g;t+=1){const e=2*Math.PI/g*t-Math.PI/2,s="counterclockwise"===l?t:(g-t)%g;$.append(i("circle",{class:"sf-loader-dot"+(t<E?" sf-loader-dot--active":""),cx:n(d+x*Math.cos(e)),cy:n(u+x*Math.sin(e)),r:n(M),fill:"currentColor",style:`--sf-loader-dot-index:${t}; --sf-loader-dot-step:${s};`}))}return p.append(y,b,w,$),p}({...t,width:24,height:24,stroke:2,dotRadius:null,pixel:!1})}class a extends t{static componentName="IconButtons";html=null;constructor(t){super(t);const{size:e="1",type:s="default",scheme:i="primary",icon:n,tightness:a,spacing:r,radius:l,loading:c=!1,disabled:d=!1,utilities:u={}}=this.params||{},h=this.attrs.class||this.attrs.className;this.button=document.createElement("button"),this.id&&(this.button.id=this.id),this.button.classList.add("sf-icon-button","sf-icon-button--icon",`sf-icon-button--size-${e}`,`sf-icon-button--${s}`,`sf-icon-button--${i}`);const f=["normal","compact","comfortable","spacious"].includes(r);f&&"normal"!==r?this.button.classList.add(`spacing-${r}`):!f&&a&&this.button.classList.add(`tightness-${a}`),l&&this.button.classList.add(`radius-${l}`),c&&(this.button.classList.add("loading","sf-icon-button-state-loading"),this.button.setAttribute("aria-busy","true"),this.button.disabled=!0),d&&(this.button.disabled=!0),h&&this.button.classList.add(...`${h}`.split(" ").filter(Boolean)),Object.entries(this.attrs).filter(([t])=>!["class","className"].includes(t)).forEach(([t,e])=>{null!=e&&this.button.setAttribute(t,e)}),this.button.hasAttribute("type")||this.button.setAttribute("type","button"),this.iconElement=this.createIcon(n),this.applyLayoutUtilities(this.button,".sf-icon-button"),this.applyLayoutUtilities(this.iconElement,".sf-icon-button .sf-icon"),this.applyUtilities(this.button,u.button??u),this.applyUtilities(this.iconElement,u.icon),c?(this.spinner=function({className:t="",overlay:e=!1}={}){const s=document.createElement("span");s.className=["sf-loader-container","sf-loader--infinite",t,t&&e?`${t}--overlay`:""].filter(Boolean).join(" "),s.dataset.sfSpinnerBound="1",s.dataset.infinite="true",s.setAttribute("aria-hidden","true");const i=document.createElement("span");return i.className="sf-loader--loading-indicator",i.append(o()),s.append(i),s}({className:"sf-icon-button-spinner"}),this.button.append(this.spinner)):this.iconElement&&this.button.append(this.iconElement),this.template=this.button}createIcon(t){if(!t)return null;const e=document.createElement("i");return e.classList.add("sf-icon"),e.setAttribute("aria-hidden","true"),e.textContent=t,e}applyUtilities(t,e){if(!t||!e)return;var s;(s=e,Array.isArray(s)?s:"string"==typeof s?s.split(" "):Array.isArray(s?.classes)?s.classes:"string"==typeof s?.classes?s.classes.split(" "):Array.isArray(s?.button)?s.button:"string"==typeof s?.button?s.button.split(" "):[]).filter(Boolean).forEach(e=>t.classList.add(e))}}a.utilityMap=e,s("IconButtons",a)})();
1
+ (()=>{"use strict";class t{lifecycleName(){return this.componentName??this.constructor.componentName}constructor(t){this.props=t,this.id=t?.id,this.params=t?.param,this.attrs=t?.attrs||{},this.template=null,window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:beforeRender`,{detail:this}))}getUtilityMap(){return this.constructor.utilityMap||null}extractUtilityClasses(t){if(!Array.isArray(t))return[];const e=new Set;return t.forEach(t=>{if("string"!=typeof t)return;const s=t.match(/\(([^)]+)\)/g);s&&s.forEach(t=>{t.slice(1,-1).split(/\s+/).filter(Boolean).forEach(t=>{t.startsWith(".")&&t.length>1&&e.add(t.slice(1))})})}),Array.from(e)}applyLayoutUtilities(t,e){if(!t||!e)return;const s=this.getUtilityMap();if(!s||!s[e])return;this.extractUtilityClasses(s[e]).forEach(e=>t.classList.add(e))}render(){return this.html=this.template,"function"==typeof this.init&&this.init(),this.html&&window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:render`,{detail:this})),this.html}destroy(){this.destroyInternal?.(),this.props=null,this.id=null,this.params=null,this.template=null,this.html&&(this.html.remove(),this.html=null),window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:destroy`,{detail:this}))}destroyInternal(){}}const e=JSON.parse('{".sf-icon-button":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/center (.justify-center)","align-items/center (.items-center)"],".sf-icon-button .sf-icon":["display/flex (.flex)","justify-content/center (.justify-center)","align-items/center (.items-center)"]}');const s=function(t,e){if(t&&e)if("undefined"==typeof window||"function"!=typeof window.registerSfComponent){if("undefined"!=typeof window&&window.SF?.Loader?.registerComponent)window.SF.Loader.registerComponent(t,e);else if("undefined"!=typeof window){(window.SF_PENDING_COMPONENTS=window.SF_PENDING_COMPONENTS||[]).push([t,e])}}else window.registerSfComponent(t,e)};function i(t,e={}){const s=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{null!=e&&""!==e&&s.setAttribute(t,String(e))}),s}const n=t=>Math.round(1e3*t)/1e3;function o(t={}){return function({width:t=24,height:e=24,stroke:s=2,dots:o=8,filled:a=3,dotRadius:r=null,direction:l="clockwise",pixel:c=!1}={}){const d=t/2,u=e/2,h=Math.min(t,e)/2,f=Math.max(1,h-s/2),p=i("svg",{class:"sf-loader-svg",viewBox:`0 0 ${t} ${e}`,width:c?t:null,height:c?e:null,"aria-hidden":"true",focusable:"false"}),m={cx:d,cy:u,r:n(f),fill:"none",stroke:"currentColor","stroke-width":s},y=i("circle",{class:"sf-loader-ring-filled",...m,opacity:"0.3"}),b=i("circle",{class:"sf-loader-ring-accent",...m,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"30 70",transform:`rotate(90 ${d} ${u})`}),w=i("g",{class:"sf-loader-comet",display:"none",transform:`rotate(-90 ${d} ${u})`});for(let t=0;t<10;t+=1){const e=9===t;w.append(i("circle",{class:"sf-loader-comet-segment"+(e?" sf-loader-comet-head":""),...m,"stroke-linecap":e?"round":"butt",pathLength:100,"stroke-dasharray":`${n(4)} ${n(96)}`,"stroke-dashoffset":n(-4*t),opacity:n(((t+1)/10)**1.6)}))}const g=Math.max(3,Math.min(32,Math.floor(Number(o)||8))),E=Math.max(1,Math.min(g,Math.floor(Number(a)||3))),N=Math.min(s,.7*Math.PI*(h-s)/g),M=null==r||""===r?N:Math.max(1,Math.min(Number(r)||N,h/4)),x=Math.max(M,h-M),$=i("g",{class:"sf-loader-dots",display:"none",style:`--sf-loader-dot-count:${g}; --sf-loader-dot-filled:${E};`});for(let t=0;t<g;t+=1){const e=2*Math.PI/g*t-Math.PI/2,s="counterclockwise"===l?t:(g-t)%g;$.append(i("circle",{class:"sf-loader-dot"+(t<E?" sf-loader-dot--active":""),cx:n(d+x*Math.cos(e)),cy:n(u+x*Math.sin(e)),r:n(M),fill:"currentColor",style:`--sf-loader-dot-index:${t}; --sf-loader-dot-step:${s};`}))}return p.append(y,b,w,$),p}({...t,width:24,height:24,stroke:2,dotRadius:null,pixel:!1})}class a extends t{static componentName="IconButtons";html=null;constructor(t){super(t);const{size:e="1",type:s="default",scheme:i="primary",icon:n,tightness:a,spacing:r,radius:l,loading:c=!1,disabled:d=!1,utilities:u={}}=this.params||{},h=this.attrs.class||this.attrs.className;this.button=document.createElement("button"),this.id&&(this.button.id=this.id),this.button.classList.add("sf-icon-button","sf-icon-button--icon",`sf-icon-button--size-${e}`,`sf-icon-button--${s}`,`sf-icon-button--${i}`);const f=["normal","compact","comfortable","spacious"].includes(r);f&&"normal"!==r?this.button.classList.add(`spacing-${r}`):!f&&a&&this.button.classList.add(`tightness-${a}`),l&&this.button.classList.add(`radius-${l}`),c&&(this.button.classList.add("loading","sf-icon-button-state-loading"),this.button.setAttribute("aria-busy","true"),this.button.disabled=!0),d&&(this.button.disabled=!0),h&&this.button.classList.add(...`${h}`.split(" ").filter(Boolean)),Object.entries(this.attrs).filter(([t])=>!["class","className"].includes(t)).forEach(([t,e])=>{null!=e&&this.button.setAttribute(t,e)}),this.button.hasAttribute("type")||this.button.setAttribute("type","button"),this.iconElement=this.createIcon(n),this.applyLayoutUtilities(this.button,".sf-icon-button"),this.applyLayoutUtilities(this.iconElement,".sf-icon-button .sf-icon"),this.applyUtilities(this.button,u.button??u),this.applyUtilities(this.iconElement,u.icon),c?(this.spinner=function({className:t="",overlay:e=!1}={}){const s=document.createElement("span");s.className=["sf-loader-container","sf-loader--infinite",t,t&&e?`${t}--overlay`:""].filter(Boolean).join(" "),s.dataset.sfSpinnerBound="1",s.dataset.infinite="true",s.setAttribute("aria-hidden","true");const i=document.createElement("span");return i.className="sf-loader--loading-indicator",i.append(o()),s.append(i),s}({className:"sf-icon-button-spinner"}),this.button.append(this.spinner)):this.iconElement&&this.button.append(this.iconElement),this.template=this.button}createIcon(t){if(!t)return null;const e=document.createElement("i");return e.classList.add("sf-icon"),e.setAttribute("aria-hidden","true"),e.textContent=t,e}applyUtilities(t,e){if(!t||!e)return;var s;(s=e,Array.isArray(s)?s:"string"==typeof s?s.split(" "):Array.isArray(s?.classes)?s.classes:"string"==typeof s?.classes?s.classes.split(" "):Array.isArray(s?.button)?s.button:"string"==typeof s?.button?s.button.split(" "):[]).filter(Boolean).forEach(e=>t.classList.add(e))}}a.utilityMap=e,s("IconButtons",a)})();