@simai-studio/ui 5.20261019.1921 → 5.20261020.1056

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 (26) hide show
  1. package/README.md +5 -5
  2. package/distr/component/button-group/css/button-group.min.css +1 -1
  3. package/distr/component/buttons/css/buttons.min.css +1 -1
  4. package/distr/component/buttons/js/buttons.min.js +1 -1
  5. package/distr/component/icon-buttons/css/icon-buttons.min.css +1 -1
  6. package/distr/component/icon-buttons/js/icon-buttons.min.js +1 -1
  7. package/distr/component/spinner/css/spinner.min.css +1 -1
  8. package/distr/component/spinner/js/spinner.min.js +1 -1
  9. package/distr/core/js/core-rules.js +25 -2
  10. package/distr/core/js/core-rules.min.js +1 -1
  11. package/distr/rule/js/rule.min.js +1 -1
  12. package/distr/rule/rule.json +24 -0
  13. package/distr/smart/button-group/js/button-group.min.js +13 -10
  14. package/distr/smart/button-group/smart.manifest.json +8 -3
  15. package/distr/smart/button-group/template/default.js +15 -2
  16. package/distr/smart/buttons/js/buttons.min.js +11 -10
  17. package/distr/smart/buttons/smart.manifest.json +3 -2
  18. package/distr/smart/buttons/template/default.js +17 -2
  19. package/distr/smart/icon-buttons/js/icon-buttons.min.js +11 -11
  20. package/distr/smart/icon-buttons/smart.manifest.json +4 -3
  21. package/distr/smart/icon-buttons/template/default.js +6 -2
  22. package/distr/smart/spinner/js/spinner.min.js +2 -2
  23. package/distr/smart/spinner/smart.manifest.json +36 -9
  24. package/distr/smart/spinner/template/default.js +4 -1
  25. package/package-manifest.json +26 -26
  26. package/package.json +5 -5
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{--sf-icon-button-loading-stripe: var(--sf-alpha-8)}.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;overflow:hidden}.sf-icon-button.loading::after,.sf-icon-button.sf-icon-button-state-loading::after{content:"";position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;inset:-50%;background-image:repeating-linear-gradient(135deg, var(--sf-icon-button-loading-stripe) 0, var(--sf-icon-button-loading-stripe) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));-webkit-animation:sf-icon-button-stripes-slide calc(var(--sf-duration-slow)*2) linear infinite;animation:sf-icon-button-stripes-slide calc(var(--sf-duration-slow)*2) linear infinite;will-change:transform;pointer-events:none}@-webkit-keyframes sf-icon-button-stripes-slide{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(calc(var(--sf-space-1) * 1.41421356));transform:translateX(calc(var(--sf-space-1) * 1.41421356))}}@keyframes sf-icon-button-stripes-slide{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(calc(var(--sf-space-1) * 1.41421356));transform:translateX(calc(var(--sf-space-1) * 1.41421356))}}@media(prefers-reduced-motion: reduce){.sf-icon-button.loading::after,.sf-icon-button.sf-icon-button-state-loading::after{-webkit-animation:none;animation:none}}}
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))}}
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 i=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&&i.add(t.slice(1))})})}),Array.from(i)}applyLayoutUtilities(t,i){if(!t||!i)return;const s=this.getUtilityMap();if(!s||!s[i])return;this.extractUtilityClasses(s[i]).forEach(i=>t.classList.add(i))}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 i=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,i){if(t&&i)if("undefined"==typeof window||"function"!=typeof window.registerSfComponent){if("undefined"!=typeof window&&window.SF?.Loader?.registerComponent)window.SF.Loader.registerComponent(t,i);else if("undefined"!=typeof window){(window.SF_PENDING_COMPONENTS=window.SF_PENDING_COMPONENTS||[]).push([t,i])}}else window.registerSfComponent(t,i)};class e extends t{static componentName="IconButtons";html=null;constructor(t){super(t);const{size:i="1",type:s="default",scheme:e="primary",icon:n,tightness:o,spacing:a,radius:r,loading:l=!1,disabled:c=!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-${i}`,`sf-icon-button--${s}`,`sf-icon-button--${e}`);const d=["normal","compact","comfortable","spacious"].includes(a);d&&"normal"!==a?this.button.classList.add(`spacing-${a}`):!d&&o&&this.button.classList.add(`tightness-${o}`),r&&this.button.classList.add(`radius-${r}`),l&&(this.button.classList.add("loading","sf-icon-button-state-loading"),this.button.setAttribute("aria-busy","true"),this.button.disabled=!0),c&&(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,i])=>{null!=i&&this.button.setAttribute(t,i)}),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),this.iconElement&&this.button.append(this.iconElement),this.template=this.button}createIcon(t){if(!t)return null;const i=document.createElement("i");return i.classList.add("sf-icon"),i.setAttribute("aria-hidden","true"),i.textContent=t,i}applyUtilities(t,i){if(!t||!i)return;var s;(s=i,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(i=>t.classList.add(i))}}e.utilityMap=i,s("IconButtons",e)})();
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}function n({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 n=document.createElement("span");return n.className="sf-loader--loading-indicator",n.append(function(){const t=12,e=i("svg",{class:"sf-loader-svg",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"}),s=i("circle",{class:"sf-loader-ring-filled",cx:t,cy:t,r:11,fill:"none",stroke:"currentColor","stroke-width":2,opacity:"0.3"}),n=i("circle",{class:"sf-loader-ring-accent",cx:t,cy:t,r:11,fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"0 100",transform:"rotate(90 12 12)"});return e.append(s,n),e}()),s.append(n),s}class o extends t{static componentName="IconButtons";html=null;constructor(t){super(t);const{size:e="1",type:s="default",scheme:i="primary",icon:o,tightness:r,spacing:a,radius:l,loading:c=!1,disabled:u=!1,utilities:d={}}=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(a);f&&"normal"!==a?this.button.classList.add(`spacing-${a}`):!f&&r&&this.button.classList.add(`tightness-${r}`),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),u&&(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(o),this.applyLayoutUtilities(this.button,".sf-icon-button"),this.applyLayoutUtilities(this.iconElement,".sf-icon-button .sf-icon"),this.applyUtilities(this.button,d.button??d),this.applyUtilities(this.iconElement,d.icon),c?(this.spinner=n({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))}}o.utilityMap=e,s("IconButtons",o)})();
package/distr/component/spinner/css/spinner.min.css CHANGED
@@ -1 +1 @@
1
- @layer sf.components{.sf-loader-container{--sf-loader--color: var(--sf-primary);--sf-loader-track-color: var(--sf-surface-container);--sf-loader-svg-width: var(--sf-d2);--sf-loader-svg-height: var(--sf-d2);--sf-loader-stroke-width: var(--sf-a6);--sf-loader-text-gap: var(--sf-space-1\/2);--sf-loader-text-size: var(--sf-text-size-1);--sf-loader-cycle-duration: calc(var(--sf-duration-slow) * 6);--sf-loader-dot-duration: calc(var(--sf-duration-slow) * 3);display:flex;flex-direction:column;align-items:center;gap:var(--sf-loader-text-gap);justify-content:center}.sf-loader-container .sf-loader--text{font-family:var(--sf-text--family);font-weight:400;font-size:var(--sf-loader-text-size);color:var(--sf-on-surface)}.sf-loader-container.sf-loader--size-1\/2{--sf-loader-stroke-width: var(--sf-a4);--sf-loader-text-gap: var(--sf-space-1\/3);--sf-loader-text-size: var(--sf-text-size-1\/2)}.sf-loader-container.sf-loader--size-1,.sf-loader-container.sf-loader--size-2{--sf-loader-stroke-width: var(--sf-a6)}.sf-loader-container.sf-loader--size-1{--sf-loader-text-gap: var(--sf-space-1\/2);--sf-loader-text-size: var(--sf-text-size-1)}.sf-loader-container.sf-loader--size-2{--sf-loader-text-gap: var(--sf-space-1);--sf-loader-text-size: var(--sf-text-size-2)}.sf-loader-container.sf-loader--size-3{--sf-loader-stroke-width: var(--sf-a8);--sf-loader-text-gap: var(--sf-space-2);--sf-loader-text-size: var(--sf-text-size-3)}}@layer sf.components{.sf-loader-container{--sf-loader-track-color: var(--sf-surface-container);--sf-loader-svg-width: var(--sf-text-size-8);--sf-loader-svg-height: var(--sf-text-size-8);--sf-loader-stroke-width: var(--sf-a5);color:var(--sf-primary);color:var(--sf-loader--color, var(--sf-primary))}.sf-loader-container.sf-loader--size-1\/2{--sf-loader-svg-width: var(--sf-text-size-5);--sf-loader-svg-height: var(--sf-text-size-5)}.sf-loader-container.sf-loader--size-1{--sf-loader-svg-width: var(--sf-text-size-8);--sf-loader-svg-height: var(--sf-text-size-8)}.sf-loader-container.sf-loader--size-2{--sf-loader-svg-width: var(--sf-text-size-9);--sf-loader-svg-height: var(--sf-text-size-9)}.sf-loader-container.sf-loader--size-3{--sf-loader-svg-width: var(--sf-text-size-10);--sf-loader-svg-height: var(--sf-text-size-10)}.sf-loader-container .sf-loader--loading-indicator,.sf-loader-container .sf-loader--circles{display:inline-flex;height:var(--sf-loader-svg-height);width:var(--sf-loader-svg-width)}.sf-loader-container .sf-loader-svg{display:block;height:100%;overflow:visible;width:100%}.sf-loader-container .sf-loader-ring-filled{fill:none;opacity:var(--sf-opacity-30);stroke:var(--sf-surface-container);stroke:var(--sf-loader-track-color, var(--sf-surface-container));stroke-linecap:round;stroke-width:var(--sf-loader-stroke-width)}.sf-loader-container .sf-loader-ring-accent{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--sf-loader-stroke-width)}.sf-loader-container .sf-loader--loading-indicator .sf-loader-ring-accent{-webkit-animation:sf-loader-ring-accent-fill var(--sf-loader-cycle-duration) linear both;animation:sf-loader-ring-accent-fill var(--sf-loader-cycle-duration) linear both}.sf-loader-container.sf-loader--infinite .sf-loader--loading-indicator .sf-loader-ring-accent{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.sf-loader-container .sf-loader-dot{fill:currentColor;opacity:var(--sf-opacity-20);-webkit-animation:sf-loader-dot-wave var(--sf-loader-dot-duration) linear both;animation:sf-loader-dot-wave var(--sf-loader-dot-duration) linear both;-webkit-animation-delay:calc(var(--sf-loader-dot-duration)/var(--sf-loader-dot-count)*var(--sf-loader-dot-step)*-1);animation-delay:calc(var(--sf-loader-dot-duration)/var(--sf-loader-dot-count)*var(--sf-loader-dot-step)*-1)}.sf-loader-container .sf-loader-dot--active{opacity:var(--sf-opacity-60)}.sf-loader-container.sf-loader--infinite .sf-loader-dot{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes sf-loader-svg-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes sf-loader-svg-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes sf-loader-dot-wave{0%{opacity:var(--sf-opacity-20)}18%{opacity:1}40%{opacity:var(--sf-opacity-60)}100%{opacity:var(--sf-opacity-20)}}@keyframes sf-loader-dot-wave{0%{opacity:var(--sf-opacity-20)}18%{opacity:1}40%{opacity:var(--sf-opacity-60)}100%{opacity:var(--sf-opacity-20)}}@media(prefers-reduced-motion: reduce){.sf-loader-container .sf-loader-ring-accent,.sf-loader-container .sf-loader-dot{-webkit-animation:none !important;animation:none !important}.sf-loader-container .sf-loader-ring-accent{opacity:1;stroke-dasharray:24 76}}@-webkit-keyframes sf-loader-ring-accent-fill{0%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}10%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}18%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:0}42%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}58%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}82%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:-94}90%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}100%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}}@keyframes sf-loader-ring-accent-fill{0%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}10%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}18%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:0}42%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}58%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}82%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:-94}90%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}100%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}}}
1
+ @layer sf.components{.sf-loader-container{--sf-loader-track-color: var(--sf-surface-container);--sf-loader-svg-width: var(--sf-text-height-1);--sf-loader-svg-height: var(--sf-text-height-1);--sf-loader-stroke-width: 2;--sf-loader-text-gap: var(--sf-space-1\/2);--sf-loader-text-size: var(--sf-text-size-1);--sf-loader-cycle-duration: calc(var(--sf-duration-slow) * 6);--sf-loader-dot-duration: calc(var(--sf-duration-slow) * 3);color:currentColor;color:var(--sf-loader--color, currentColor);display:flex;flex-direction:column;align-items:center;gap:var(--sf-loader-text-gap);justify-content:center}.sf-loader-container .sf-loader--text{font-family:var(--sf-text--family);font-weight:400;font-size:var(--sf-loader-text-size);color:var(--sf-on-surface)}.sf-loader-container.sf-loader--size-1\/3{--sf-loader-svg-width: var(--sf-text-height-1\/3);--sf-loader-svg-height: var(--sf-text-height-1\/3);--sf-loader-text-gap: var(--sf-space-1\/3);--sf-loader-text-size: var(--sf-text-size-1\/3)}.sf-loader-container.sf-loader--size-1\/2{--sf-loader-svg-width: var(--sf-text-height-1\/2);--sf-loader-svg-height: var(--sf-text-height-1\/2);--sf-loader-text-gap: var(--sf-space-1\/3);--sf-loader-text-size: var(--sf-text-size-1\/2)}.sf-loader-container.sf-loader--size-1{--sf-loader-svg-width: var(--sf-text-height-1);--sf-loader-svg-height: var(--sf-text-height-1);--sf-loader-text-gap: var(--sf-space-1\/2);--sf-loader-text-size: var(--sf-text-size-1)}.sf-loader-container.sf-loader--size-2{--sf-loader-svg-width: var(--sf-text-height-2);--sf-loader-svg-height: var(--sf-text-height-2);--sf-loader-text-gap: var(--sf-space-1);--sf-loader-text-size: var(--sf-text-size-2)}.sf-loader-container.sf-loader--size-3{--sf-loader-svg-width: var(--sf-text-height-3);--sf-loader-svg-height: var(--sf-text-height-3);--sf-loader-text-gap: var(--sf-space-2);--sf-loader-text-size: var(--sf-text-size-3)}.sf-loader-container.sf-loader--pixel-geometry{--sf-loader-stroke-width: var(--sf-a5)}.sf-loader-container.sf-loader--pixel-geometry.sf-loader--size-1\/3{--sf-loader-stroke-width: var(--sf-a4)}.sf-loader-container.sf-loader--pixel-geometry.sf-loader--size-1\/2{--sf-loader-stroke-width: var(--sf-a4)}.sf-loader-container.sf-loader--pixel-geometry.sf-loader--size-1{--sf-loader-stroke-width: var(--sf-a6)}.sf-loader-container.sf-loader--pixel-geometry.sf-loader--size-2{--sf-loader-stroke-width: var(--sf-a6)}.sf-loader-container.sf-loader--pixel-geometry.sf-loader--size-3{--sf-loader-stroke-width: var(--sf-a8)}}@layer sf.components{.sf-loader-container .sf-loader--loading-indicator,.sf-loader-container .sf-loader--circles{display:inline-flex;height:var(--sf-loader-svg-height);width:var(--sf-loader-svg-width)}.sf-loader-container .sf-loader-svg{display:block;height:100%;overflow:visible;width:100%}.sf-loader-container .sf-loader-ring-filled{fill:none;opacity:var(--sf-opacity-30);stroke:var(--sf-surface-container);stroke:var(--sf-loader-track-color, var(--sf-surface-container));stroke-linecap:round;stroke-width:var(--sf-loader-stroke-width)}.sf-loader-container .sf-loader-ring-accent{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--sf-loader-stroke-width)}.sf-loader-container .sf-loader--loading-indicator .sf-loader-ring-accent{-webkit-animation:sf-loader-ring-accent-fill var(--sf-loader-cycle-duration) linear both;animation:sf-loader-ring-accent-fill var(--sf-loader-cycle-duration) linear both}.sf-loader-container.sf-loader--infinite .sf-loader--loading-indicator .sf-loader-ring-accent{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.sf-loader-container .sf-loader-dot{fill:currentColor;opacity:var(--sf-opacity-20);-webkit-animation:sf-loader-dot-wave var(--sf-loader-dot-duration) linear both;animation:sf-loader-dot-wave var(--sf-loader-dot-duration) linear both;-webkit-animation-delay:calc(var(--sf-loader-dot-duration)/var(--sf-loader-dot-count)*var(--sf-loader-dot-step)*-1);animation-delay:calc(var(--sf-loader-dot-duration)/var(--sf-loader-dot-count)*var(--sf-loader-dot-step)*-1)}.sf-loader-container .sf-loader-dot--active{opacity:var(--sf-opacity-60)}.sf-loader-container.sf-loader--infinite .sf-loader-dot{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes sf-loader-svg-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes sf-loader-svg-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes sf-loader-dot-wave{0%{opacity:var(--sf-opacity-20)}18%{opacity:1}40%{opacity:var(--sf-opacity-60)}100%{opacity:var(--sf-opacity-20)}}@keyframes sf-loader-dot-wave{0%{opacity:var(--sf-opacity-20)}18%{opacity:1}40%{opacity:var(--sf-opacity-60)}100%{opacity:var(--sf-opacity-20)}}@media(prefers-reduced-motion: reduce){.sf-loader-container .sf-loader-ring-accent,.sf-loader-container .sf-loader-dot{-webkit-animation:none !important;animation:none !important}.sf-loader-container .sf-loader-ring-accent{opacity:1;stroke-dasharray:24 76}}@-webkit-keyframes sf-loader-ring-accent-fill{0%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}10%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}18%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:0}42%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}58%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}82%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:-94}90%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}100%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}}@keyframes sf-loader-ring-accent-fill{0%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}10%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:0}18%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:0}42%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}58%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0}82%{opacity:1;stroke-dasharray:6 94;stroke-dashoffset:-94}90%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}100%{opacity:0;stroke-dasharray:.01 100;stroke-dashoffset:-100}}}
package/distr/component/spinner/js/spinner.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 n=t.match(/\(([^)]+)\)/g);n&&n.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 n=this.getUtilityMap();if(!n||!n[e])return;this.extractUtilityClasses(n[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=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)},n=(()=>{const t="undefined"!=typeof globalThis?globalThis:{},e="__sfPageLanguage";return t[e]||(t[e]={listeners:new Set,registered:new Map,chosen:null}),t[e]})(),i=n.listeners,s=n.registered,a=t=>String(t??"").trim().toLowerCase().replace("_","-"),o=()=>{for(const t of[...i])try{t()}catch{}};function r(t){let e=t;for(;e;){const t="function"==typeof e.closest?e.closest("[lang]"):null;if(t)return t;const n="function"==typeof e.getRootNode?e.getRootNode():null;e=n&&n!==e&&n.host?n.host:null}return null}function l(t){if(n.chosen)return n.chosen.split("-")[0];const e=r(t),i=e?.getAttribute("lang")||globalThis.document?.documentElement?.lang||"en";return a(i).split("-")[0]||"en"}function d(t){if(n.chosen)return n.chosen;const e=r(t);return a(e?.getAttribute("lang")||globalThis.document?.documentElement?.lang||"en")}function c(t,e,n,i){const o=i??(t=>{const e=t?.tagName;return"string"==typeof e?e.toLowerCase():null})(n);for(const i of(t=>{const e=a(t),n=e.split("-")[0],i=[];for(const t of[e,n,"en"])t&&!i.includes(t)&&i.push(t);return i})(d(n))){const n=o?s.get(o)?.get(i)?.[e]:void 0;if(void 0!==n)return n;const a=t?.[i]?.[e];if(void 0!==a)return a}return e}const h={current:(t=globalThis.document?.documentElement??null)=>d(t),use(t){const e=null==t?null:a(t);return e===n.chosen||(n.chosen=e,o()),n.chosen},register(t,e,n){const i=String(t??"").toLowerCase(),r=a(e);if(!i||!r)throw new TypeError("a component and a language are required");s.has(i)||s.set(i,new Map);const l=s.get(i);return null===n?l.delete(r):l.set(r,{...l.get(r)??{},...n}),o(),this},registerAll(t,e={}){for(const[n,i]of Object.entries(e))this.register(n,t,i);return this},known(t){const e=String(t??"").toLowerCase();return[...s.get(e)?.keys()??[]]},components:()=>[...s.keys()],onChange:t=>"function"!=typeof t?()=>{}:(i.add(t),()=>i.delete(t)),forget(){return s.clear(),n.chosen=null,o(),this}};"undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.language=h,window.SF.pageLanguage=l,window.SF.pageText=c);const u={en:{label:"Loading…"},ru:{label:"Загрузка…"}},f=".sf-loader-container",p="sfSpinnerBound";function m(t,e){const n=Number.parseFloat(String(t??""));return Number.isFinite(n)?n:e}function w(t,e,n){return Math.min(Math.max(t,e),n)}function g(t,e,n){const i=String(t||"").trim().toLowerCase();return e.includes(i)?i:n}function y(t,e={}){const n=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{null!=e&&""!==e&&n.setAttribute(t,String(e))}),n}function S({width:t=58,height:e=58,strokeWidth:n=4}={}){const i=w(m(t,58),16,256),s=w(m(e,i),16,256),a=w(m(n,4),1,Math.min(i,s)/2),o=Math.max(1,Math.min(i,s)/2-a/2),r=i/2,l=s/2,d=y("svg",{class:"sf-loader-svg",viewBox:`0 0 ${i} ${s}`,width:i,height:s,"aria-hidden":"true"}),c=y("circle",{class:"sf-loader-ring-filled",cx:r,cy:l,r:o}),h=y("circle",{class:"sf-loader-ring-accent",cx:r,cy:l,r:o,pathLength:100,"stroke-dasharray":"0 100",transform:`rotate(90 ${r} ${l})`});return d.append(c,h),d}function v({width:t=58,height:e=58,dots:n=16,filled:i=6,dotRadius:s=null,direction:a="clockwise"}={}){const o=w(m(t,58),16,256),r=w(m(e,o),16,256),l=w(Math.floor(m(n,16)),3,32),d=w(Math.floor(m(i,6)),1,l),c=null===s?Math.max(1.5,.06*Math.min(o,r)):w(m(s,1),1,Math.min(o,r)/4),h=Math.max(c,Math.min(o,r)/2-c-1),u=o/2,f=r/2,p=y("svg",{class:"sf-loader-svg",viewBox:`0 0 ${o} ${r}`,width:o,height:r,"aria-hidden":"true",style:`--sf-loader-dot-count:${l}; --sf-loader-dot-filled:${d};`});for(let t=0;t<l;t+=1){const e=2*Math.PI/l*t-Math.PI/2,n=y("circle",{class:"sf-loader-dot"+(t<d?" sf-loader-dot--active":""),cx:u+h*Math.cos(e),cy:f+h*Math.sin(e),r:c,style:`--sf-loader-dot-index:${t}; --sf-loader-dot-step:${"counterclockwise"===a?t:(l-t)%l};`});p.append(n)}return p}function b(t,e,n){let i=t.querySelector(e);return i?(i.innerHTML="",i):(i=document.createElement("div"),i.className=n,i.dataset.sfSpinnerPart=n,t.append(i),i)}function E(t){if(!(t instanceof HTMLElement))return t;const e=function(t){const e=t.querySelector(".sf-loader--loading-indicator"),n=t.querySelector(".sf-loader--circles"),i=t.querySelector(".sf-loader--text"),s=Object.prototype.hasOwnProperty.call(t.dataset,"width")||Object.prototype.hasOwnProperty.call(t.dataset,"w"),a=Object.prototype.hasOwnProperty.call(t.dataset,"height")||Object.prototype.hasOwnProperty.call(t.dataset,"h"),o=w(m(t.dataset.width,m(t.dataset.w,58)),16,256),r=w(m(t.dataset.height,m(t.dataset.h,o)),16,256),l=t.dataset.strokeWidth?w(m(t.dataset.strokeWidth,4),1,Math.min(o,r)/2):null,d=w(Math.floor(m(t.dataset.dots,16)),3,32),c=w(Math.floor(m(t.dataset.filled,6)),1,d),h=t.dataset.dotRadius?w(m(t.dataset.dotRadius,1),1,Math.min(o,r)/4):null,u=g(t.dataset.direction,["clockwise","counterclockwise"],"clockwise");let f=String(t.dataset.variant||"").toLowerCase();return f=g(f,["arc","dots"],n?"dots":"arc"),{width:o,height:r,strokeWidth:l,dots:d,filled:c,dotRadius:h,direction:u,variant:f,hasExplicitWidth:s,hasExplicitHeight:a,infinite:"true"===t.dataset.infinite,announce:"true"===t.dataset.announce,label:void 0!==t.dataset.label?t.dataset.label:i?.textContent?.trim?.()||"",indicator:e,circles:n,labelNode:i}}(t);t.classList.add("sf-loader-container"),e.infinite?t.classList.add("sf-loader--infinite"):t.classList.remove("sf-loader--infinite"),e.hasExplicitWidth?t.style.setProperty("--sf-loader-svg-width",`${e.width}px`):t.style.removeProperty("--sf-loader-svg-width"),e.hasExplicitHeight||e.hasExplicitWidth?t.style.setProperty("--sf-loader-svg-height",`${e.height}px`):t.style.removeProperty("--sf-loader-svg-height"),null!==e.strokeWidth?t.style.setProperty("--sf-loader-stroke-width",`${e.strokeWidth}px`):t.style.removeProperty("--sf-loader-stroke-width");const n="dots"===e.variant?"sf-loader--circles":"sf-loader--loading-indicator",i=b(t,`.${n}`,n),s=e.label||e.labelNode?b(t,".sf-loader--text","sf-loader--text"):null,a="dots"===e.variant?v(e):S(e);i.append(a);const o="dots"===e.variant?".sf-loader--loading-indicator":".sf-loader--circles";return t.querySelector(o)?.remove(),s&&(s.textContent=e.label||""),function(t,e){const n=Boolean(e.label);if(t.toggleAttribute("aria-hidden",!n),e.announce&&n)return t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),void(t.dataset.sfSpinnerSemantics="status");"status"===t.dataset.sfSpinnerSemantics&&(t.removeAttribute("role"),t.removeAttribute("aria-live"),t.removeAttribute("aria-atomic"),delete t.dataset.sfSpinnerSemantics)}(t,e),t}function M(t){return t instanceof HTMLElement&&"1"!==t.dataset[p]?(E(t),t.dataset[p]="1",t):t}function x(t){t instanceof HTMLElement&&delete t.dataset[p]}function N(t){(t instanceof Element||t===document)&&(t instanceof Element&&t.matches?.(f)&&M(t),t.querySelectorAll?.(f).forEach(M))}e("Spinner",class extends t{static componentName="Spinner";constructor(t){super(t);const{width:e,height:n,label:i=c(u,"label",t?.root??document.documentElement),variant:s="arc",dots:a=16,filled:o=6,strokeWidth:r=null,dotRadius:l=null,infinite:d=!1,announce:h=!1,direction:f="clockwise"}=this.params||{},p=this.attrs.class||this.attrs.className;this.template=document.createElement("div"),this.id&&(this.template.id=this.id),this.template.classList.add("sf-loader-container"),p&&this.template.classList.add(...`${p}`.split(" ").filter(Boolean)),Object.entries(this.attrs).filter(([t])=>!["class","className"].includes(t)).forEach(([t,e])=>{null!=e&&this.template.setAttribute(t,e)}),null!=e&&""!==e&&(this.template.dataset.width=String(e)),null!=n&&""!==n&&(this.template.dataset.height=String(n)),this.template.dataset.label=String(i??""),this.template.dataset.variant=String(s),this.template.dataset.dots=String(a),this.template.dataset.filled=String(o),null!=r&&""!==r&&(this.template.dataset.strokeWidth=String(r)),this.template.dataset.infinite=String(d),this.template.dataset.announce=String(h),this.template.dataset.direction=String(f),null!=l&&(this.template.dataset.dotRadius=String(l))}init(){M(this.template)}destroyInternal(){x(this.template)}}),"undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.Spinner=window.SF.Spinner||{},window.SF.Spinner.bind=M,window.SF.Spinner.render=E,window.SF.Spinner.unbind=x,window.SF.Spinner.createArcSvg=S,window.SF.Spinner.createDotsSvg=v),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>N(document)):N(document);new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&N(t)})})}).observe(document.documentElement,{childList:!0,subtree:!0})})();
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 n=t.match(/\(([^)]+)\)/g);n&&n.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 n=this.getUtilityMap();if(!n||!n[e])return;this.extractUtilityClasses(n[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=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)},n=(()=>{const t="undefined"!=typeof globalThis?globalThis:{},e="__sfPageLanguage";return t[e]||(t[e]={listeners:new Set,registered:new Map,chosen:null}),t[e]})(),i=n.listeners,o=n.registered,s=t=>String(t??"").trim().toLowerCase().replace("_","-"),r=()=>{for(const t of[...i])try{t()}catch{}};function a(t){let e=t;for(;e;){const t="function"==typeof e.closest?e.closest("[lang]"):null;if(t)return t;const n="function"==typeof e.getRootNode?e.getRootNode():null;e=n&&n!==e&&n.host?n.host:null}return null}function l(t){if(n.chosen)return n.chosen.split("-")[0];const e=a(t),i=e?.getAttribute("lang")||globalThis.document?.documentElement?.lang||"en";return s(i).split("-")[0]||"en"}function d(t){if(n.chosen)return n.chosen;const e=a(t);return s(e?.getAttribute("lang")||globalThis.document?.documentElement?.lang||"en")}function c(t,e,n,i){const r=i??(t=>{const e=t?.tagName;return"string"==typeof e?e.toLowerCase():null})(n);for(const i of(t=>{const e=s(t),n=e.split("-")[0],i=[];for(const t of[e,n,"en"])t&&!i.includes(t)&&i.push(t);return i})(d(n))){const n=r?o.get(r)?.get(i)?.[e]:void 0;if(void 0!==n)return n;const s=t?.[i]?.[e];if(void 0!==s)return s}return e}const h={current:(t=globalThis.document?.documentElement??null)=>d(t),use(t){const e=null==t?null:s(t);return e===n.chosen||(n.chosen=e,r()),n.chosen},register(t,e,n){const i=String(t??"").toLowerCase(),a=s(e);if(!i||!a)throw new TypeError("a component and a language are required");o.has(i)||o.set(i,new Map);const l=o.get(i);return null===n?l.delete(a):l.set(a,{...l.get(a)??{},...n}),r(),this},registerAll(t,e={}){for(const[n,i]of Object.entries(e))this.register(n,t,i);return this},known(t){const e=String(t??"").toLowerCase();return[...o.get(e)?.keys()??[]]},components:()=>[...o.keys()],onChange:t=>"function"!=typeof t?()=>{}:(i.add(t),()=>i.delete(t)),forget(){return o.clear(),n.chosen=null,r(),this}};function u(){const t=globalThis.SF=globalThis.SF||{};return t.__deprecationNotes instanceof Map||Object.defineProperty(t,"__deprecationNotes",{value:new Map,configurable:!0}),t.__deprecationNotes}function f({component:t="",kind:e="attribute",attribute:n="",from:i,to:o=null}={}){if(!i)return;const s=[t,e,n,i].join("|"),r=u(),a=r.get(s);if(a)a.count+=1;else if(r.set(s,{component:t,kind:e,attribute:n,from:i,to:o,count:1}),function(){const t=globalThis.document?.documentElement;return"warn"===t?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const s=t?`${t}: `:"",r="value"===e?`${n}="${i}"`:`${e} ${i}`;globalThis.console?.warn?.(`[SIMAI Framework] ${s}${r} is a legacy name${o?`; write ${o}`:""}. See contracts/changes/journal.json.`)}}if("undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.language=h,window.SF.pageLanguage=l,window.SF.pageText=c),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const t=globalThis.SF.deprecations||{};t.list=function(){return[...u().values()].map(t=>({...t}))},t.clear=function(){u().clear()},t.note=f,globalThis.SF.deprecations=t}function p(t,e={}){const n=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{null!=e&&""!==e&&n.setAttribute(t,String(e))}),n}function m(){const t=12,e=p("svg",{class:"sf-loader-svg",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"}),n=p("circle",{class:"sf-loader-ring-filled",cx:t,cy:t,r:11,fill:"none",stroke:"currentColor","stroke-width":2,opacity:"0.3"}),i=p("circle",{class:"sf-loader-ring-accent",cx:t,cy:t,r:11,fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"0 100",transform:"rotate(90 12 12)"});return e.append(n,i),e}const g={en:{label:"Loading…"},ru:{label:"Загрузка…"}},w=".sf-loader-container",S="sfSpinnerBound";function y(t,e){const n=Number.parseFloat(String(t??""));return Number.isFinite(n)?n:e}function b(t,e,n){return Math.min(Math.max(t,e),n)}function v(t,e,n){const i=String(t||"").trim().toLowerCase();return e.includes(i)?i:n}const E=[["width","data-width","width"],["w","data-w","width"],["height","data-height","height"],["h","data-h","height"],["strokeWidth","data-stroke-width","stroke-width"],["dotRadius","data-dot-radius","dot-radius"]];function x({width:t=58,height:e=58,strokeWidth:n=4}={}){const i=b(y(t,58),16,256),o=b(y(e,i),16,256),s=b(y(n,4),1,Math.min(i,o)/2),r=Math.max(1,Math.min(i,o)/2-s/2),a=i/2,l=o/2,d=p("svg",{class:"sf-loader-svg",viewBox:`0 0 ${i} ${o}`,width:i,height:o,"aria-hidden":"true"}),c=p("circle",{class:"sf-loader-ring-filled",cx:a,cy:l,r}),h=p("circle",{class:"sf-loader-ring-accent",cx:a,cy:l,r,pathLength:100,"stroke-dasharray":"0 100",transform:`rotate(90 ${a} ${l})`});return d.append(c,h),d}function M({width:t=58,height:e=58,dots:n=16,filled:i=6,dotRadius:o=null,direction:s="clockwise"}={}){const r=b(y(t,58),16,256),a=b(y(e,r),16,256),l=b(Math.floor(y(n,16)),3,32),d=b(Math.floor(y(i,6)),1,l),c=null===o?Math.max(1.5,.06*Math.min(r,a)):b(y(o,1),1,Math.min(r,a)/4),h=Math.max(c,Math.min(r,a)/2-c-1),u=r/2,f=a/2,m=p("svg",{class:"sf-loader-svg",viewBox:`0 0 ${r} ${a}`,width:r,height:a,"aria-hidden":"true",style:`--sf-loader-dot-count:${l}; --sf-loader-dot-filled:${d};`});for(let t=0;t<l;t+=1){const e=2*Math.PI/l*t-Math.PI/2,n=p("circle",{class:"sf-loader-dot"+(t<d?" sf-loader-dot--active":""),cx:u+h*Math.cos(e),cy:f+h*Math.sin(e),r:c,style:`--sf-loader-dot-index:${t}; --sf-loader-dot-step:${"counterclockwise"===s?t:(l-t)%l};`});m.append(n)}return m}function k(t){const e=t.querySelector(".sf-loader--loading-indicator"),n=t.querySelector(".sf-loader--circles"),i=t.querySelector(".sf-loader--text"),o=Object.prototype.hasOwnProperty.call(t.dataset,"width")||Object.prototype.hasOwnProperty.call(t.dataset,"w"),s=Object.prototype.hasOwnProperty.call(t.dataset,"height")||Object.prototype.hasOwnProperty.call(t.dataset,"h"),r=function(t){const e=t.closest?.("sf-spinner"),n=E.filter(([e])=>{const n=t.dataset[e];return void 0!==n&&""!==n});return n.forEach(([,t,n])=>{f({component:e?"sf-spinner":"spinner",kind:"attribute",from:e?n:t,to:e?"size":null})}),n.length>0}(t),a=b(y(t.dataset.width,y(t.dataset.w,58)),16,256),l=b(y(t.dataset.height,y(t.dataset.h,a)),16,256),d=t.dataset.strokeWidth?b(y(t.dataset.strokeWidth,4),1,Math.min(a,l)/2):null,c=b(Math.floor(y(t.dataset.dots,16)),3,32),h=b(Math.floor(y(t.dataset.filled,6)),1,c),u=t.dataset.dotRadius?b(y(t.dataset.dotRadius,1),1,Math.min(a,l)/4):null,p=v(t.dataset.direction,["clockwise","counterclockwise"],"clockwise");let m=String(t.dataset.variant||"").toLowerCase();return m=v(m,["arc","dots"],n?"dots":"arc"),{pixel:r,width:a,height:l,strokeWidth:d,dots:c,filled:h,dotRadius:u,direction:p,variant:m,hasExplicitWidth:o,hasExplicitHeight:s,infinite:"true"===t.dataset.infinite,announce:"true"===t.dataset.announce,label:void 0!==t.dataset.label?t.dataset.label:i?.textContent?.trim?.()||"",indicator:e,circles:n,labelNode:i}}function N(t,e,n){let i=t.querySelector(e);return i?(i.innerHTML="",i):(i=document.createElement("div"),i.className=n,i.dataset.sfSpinnerPart=n,t.append(i),i)}function F(t){if(!(t instanceof HTMLElement))return t;const e=k(t);t.classList.add("sf-loader-container"),e.infinite?t.classList.add("sf-loader--infinite"):t.classList.remove("sf-loader--infinite"),e.pixel&&e.hasExplicitWidth?t.style.setProperty("--sf-loader-svg-width",`${e.width}px`):t.style.removeProperty("--sf-loader-svg-width"),e.pixel&&(e.hasExplicitHeight||e.hasExplicitWidth)?t.style.setProperty("--sf-loader-svg-height",`${e.height}px`):t.style.removeProperty("--sf-loader-svg-height"),null!==e.strokeWidth?t.style.setProperty("--sf-loader-stroke-width",`${e.strokeWidth}px`):t.style.removeProperty("--sf-loader-stroke-width"),t.classList.toggle("sf-loader--pixel-geometry",e.pixel);const n="dots"===e.variant?"sf-loader--circles":"sf-loader--loading-indicator",i=N(t,`.${n}`,n),o=e.label||e.labelNode?N(t,".sf-loader--text","sf-loader--text"):null,s=e.pixel?e:{...e,width:24,height:24,strokeWidth:null},r="dots"===e.variant?M(s):e.pixel?x(e):m();i.append(r);const a="dots"===e.variant?".sf-loader--loading-indicator":".sf-loader--circles";return t.querySelector(a)?.remove(),o&&(o.textContent=e.label||""),function(t,e){const n=Boolean(e.label);if(t.toggleAttribute("aria-hidden",!n),e.announce&&n)return t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),void(t.dataset.sfSpinnerSemantics="status");"status"===t.dataset.sfSpinnerSemantics&&(t.removeAttribute("role"),t.removeAttribute("aria-live"),t.removeAttribute("aria-atomic"),delete t.dataset.sfSpinnerSemantics)}(t,e),t}function L(t){return t instanceof HTMLElement&&"1"!==t.dataset[S]?(F(t),t.dataset[S]="1",t):t}function $(t){t instanceof HTMLElement&&delete t.dataset[S]}function C(t){(t instanceof Element||t===document)&&(t instanceof Element&&t.matches?.(w)&&L(t),t.querySelectorAll?.(w).forEach(L))}e("Spinner",class extends t{static componentName="Spinner";constructor(t){super(t);const{width:e,height:n,label:i=c(g,"label",t?.root??document.documentElement),variant:o="arc",dots:s=16,filled:r=6,strokeWidth:a=null,dotRadius:l=null,infinite:d=!1,announce:h=!1,direction:u="clockwise"}=this.params||{},f=this.attrs.class||this.attrs.className;this.template=document.createElement("div"),this.id&&(this.template.id=this.id),this.template.classList.add("sf-loader-container"),f&&this.template.classList.add(...`${f}`.split(" ").filter(Boolean)),Object.entries(this.attrs).filter(([t])=>!["class","className"].includes(t)).forEach(([t,e])=>{null!=e&&this.template.setAttribute(t,e)}),null!=e&&""!==e&&(this.template.dataset.width=String(e)),null!=n&&""!==n&&(this.template.dataset.height=String(n)),this.template.dataset.label=String(i??""),this.template.dataset.variant=String(o),this.template.dataset.dots=String(s),this.template.dataset.filled=String(r),null!=a&&""!==a&&(this.template.dataset.strokeWidth=String(a)),this.template.dataset.infinite=String(d),this.template.dataset.announce=String(h),this.template.dataset.direction=String(u),null!=l&&(this.template.dataset.dotRadius=String(l))}init(){L(this.template)}destroyInternal(){$(this.template)}}),"undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.Spinner=window.SF.Spinner||{},window.SF.Spinner.bind=L,window.SF.Spinner.render=F,window.SF.Spinner.unbind=$,window.SF.Spinner.createArcSvg=function(t={}){return["width","height","strokeWidth"].some(e=>{const n=t?.[e];return null!=n&&""!==n})?x(t):m()},window.SF.Spinner.createDotsSvg=M),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>C(document)):C(document);new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&C(t)})})}).observe(document.documentElement,{childList:!0,subtree:!0})})();