@property --_sb-icon-button-overlay{syntax:"<color>";inherits:false;initial-value:#0000}@layer sb.components{.sb-icon-button{--_size:var(--sb-control-height-md);--_bg:transparent;--_fg:var(--sb-color-fg-muted);--_fg-hover:var(--sb-color-fg-default);--_tone:var(--sb-duration-normal);inline-size:max(var(--_size), var(--sb-target-min));block-size:max(var(--_size), var(--sb-target-min));border-radius:var(--sb-radius-control);color:var(--_fg);background-color:var(--_bg);background-image:linear-gradient(var(--_sb-icon-button-overlay,transparent), var(--_sb-icon-button-overlay,transparent));cursor:pointer;-webkit-tap-highlight-color:transparent;transition:--_sb-icon-button-overlay var(--_tone) var(--sb-easing-standard), background-color var(--_tone) var(--sb-easing-standard), color var(--_tone) var(--sb-easing-standard), scale var(--sb-duration-slow) var(--sb-easing-spring);border:1px solid #0000;flex:none;place-items:center;display:inline-grid;position:relative}.sb-icon-button:before{content:"";border-radius:inherit;background-color:var(--sb-color-bg-selected);opacity:0;pointer-events:none;transition:opacity var(--sb-duration-fast) var(--sb-easing-standard), scale var(--sb-duration-slow) var(--sb-easing-spring), background-color var(--sb-duration-fast) var(--sb-easing-standard);position:absolute;inset:-1px;scale:.7}.sb-icon-button__icon{transition:opacity var(--sb-duration-fast) var(--sb-easing-standard), filter var(--sb-duration-fast) var(--sb-easing-standard), scale var(--sb-duration-normal) var(--sb-easing-spring);position:relative}@media (hover:hover){.sb-icon-button:not([aria-disabled=true]):hover{--_tone:var(--sb-duration-fast);--_sb-icon-button-overlay:var(--sb-color-bg-hover);color:var(--_fg-hover)}.sb-icon-button[data-variant=primary]:not([aria-disabled=true]):hover{--_bg:var(--sb-color-accent-solid-hover);--_sb-icon-button-overlay:transparent}.sb-icon-button[aria-pressed=true]:not([aria-disabled=true]):hover:before{background-color:var(--sb-color-bg-selected-hover)}}.sb-icon-button:not([aria-disabled=true]):active{--_sb-icon-button-overlay:var(--sb-color-bg-active);scale:var(--sb-motion-scale-md);transition-duration:var(--sb-duration-instant)}.sb-icon-button[data-size=sm]{--_size:var(--sb-control-height-sm)}.sb-icon-button[data-size=lg]{--_size:var(--sb-control-height-lg)}.sb-icon-button[data-variant=secondary]{--_bg:var(--sb-color-bg-canvas);--_fg:var(--sb-color-fg-default);border-color:var(--sb-color-border-default)}.sb-icon-button[data-variant=primary]{--_bg:var(--sb-color-accent-solid);--_fg:var(--sb-color-fg-on-accent);--_fg-hover:var(--sb-color-fg-on-accent)}.sb-icon-button[data-variant=primary]:not([aria-disabled=true]):active{--_bg:var(--sb-color-accent-solid-active);--_sb-icon-button-overlay:transparent}.sb-icon-button[aria-pressed=true]{--_fg:var(--sb-color-fg-accent);--_fg-hover:var(--sb-color-fg-accent)}.sb-icon-button[aria-pressed=true]:before{opacity:1;scale:1}.sb-icon-button__icon[data-morph]{animation:sb-icon-button-morph var(--sb-duration-slow) var(--sb-easing-spring)}@keyframes sb-icon-button-morph{0%{opacity:.4;scale:.6}}.sb-icon-button[aria-disabled=true]{--_bg:transparent;--_fg:var(--sb-color-fg-disabled);cursor:not-allowed}.sb-icon-button[data-nudge]{animation:sb-shake var(--sb-duration-slower) var(--sb-easing-standard)}.sb-icon-button[aria-busy=true]{cursor:progress}.sb-icon-button__icon[data-hidden]{opacity:0;filter:blur(2px);scale:.8}.sb-icon-button__overlay{place-items:center;display:grid;position:absolute;inset:0}.sb-icon-button:not([data-variant=primary]) .sb-icon-button__overlay[data-kind=success]{color:var(--sb-color-success-fg)}.sb-icon-button__check path{stroke-dasharray:24;animation:sb-draw var(--sb-duration-slower) var(--sb-easing-enter) both;animation-delay:var(--sb-duration-instant)}.sb-icon-button[data-status=error]{border-color:var(--sb-color-danger-border);animation:sb-shake var(--sb-duration-slower) var(--sb-easing-standard)}.sb-icon-button[data-status=error] .sb-icon-button__icon{animation:sb-pop var(--sb-duration-slow) var(--sb-easing-spring)}.sb-icon-button:not([data-variant=primary])[data-status=error]{--_fg:var(--sb-color-danger-fg);--_fg-hover:var(--sb-color-danger-fg)}@media (forced-colors:active){.sb-icon-button[data-variant=secondary]{border-color:buttontext}.sb-icon-button[aria-pressed=true]{color:highlight;border-color:highlight}.sb-icon-button[aria-disabled=true]{color:graytext}.sb-icon-button[data-status=error]{border-color:canvastext}}}