.icon-button{--container-color:black;--container-opacity:0%;background-color:color-mix(in oklab, var(--container-color) var(--container-opacity), transparent);--label-color:var(--color-on-surface-variant);--label-opacity:100%;color:color-mix(in oklab, var(--label-color) var(--label-opacity), transparent);--state-color:var(--color-on-surface-variant);--state-opacity:0%;--radius:0;border-radius:var(--radius);place-items:center;transition-property:all;transition-duration:.35s;transition-timing-function:cubic-bezier(.42,1.67,.21,.9);display:grid;position:relative}.icon-button.disabled{pointer-events:none}.icon-button:before{content:"";background-color:color-mix(in oklab, var(--state-color) var(--state-opacity), transparent);border-radius:inherit;transition:inherit;position:absolute;inset:0}.icon-button:hover:before{--state-opacity:8%}.icon-button:active:before{--state-opacity:10%}.icon-button.filled{--container-color:var(--color-primary);--container-opacity:100%;--label-color:var(--color-on-primary);--state-color:var(--color-on-primary)}.icon-button.filled.disabled{--container-opacity:10%;--label-opacity:38%}.icon-button.tonal{--container-color:var(--color-secondary-container);--container-opacity:100%;--label-color:var(--color-on-secondary-container);--state-color:var(--color-on-secondary-container)}.icon-button.tonal.disabled{--container-color:var(--color-on-surface);--container-opacity:10%;--label-color:var(--color-on-surface);--label-opacity:38%}.icon-button.outlined{--label-color:var(--color-on-surface-variant);--state-color:var(--color-on-surface-variant);outline:solid 2px var(--outline-variant)}.icon-button.outlined.disabled{--label-color:var(--color-on-surface);--label-opacity:38%}.icon-button.xs{--radius:12px;width:32px;height:32px;font-size:20px}.round .icon-button.xs{--radius:32px}.icon-button.xs.thin{width:28px}.icon-button.xs.wide{width:40px}.icon-button.xs:active,.icon-button.xs.selected{--radius:8px}.icon-button.sm{--radius:12px;width:40px;height:40px;font-size:24px}.round .icon-button.sm{--radius:40px}.icon-button.sm.thin{width:32px}.icon-button.sm.wide{width:52px}.icon-button.sm:active,.icon-button.sm.selected{--radius:8px}.icon-button.md{--radius:16px;width:56px;height:56px;font-size:24px}.round .icon-button.md{--radius:56px}.icon-button.md.thin{width:48px}.icon-button.md.wide{width:72px}.icon-button.md:active,.icon-button.md.selected{--radius:12px}.icon-button.lg{--radius:28px;width:96px;height:96px;font-size:32px}.round .icon-button.lg{--radius:96px}.icon-button.lg.thin{width:64px}.icon-button.lg.wide{width:128px}.icon-button.lg:active,.icon-button.lg.selected{--radius:16px}.icon-button.xl{--radius:28px;width:136px;height:136px;font-size:32px}.round .icon-button.xl{--radius:136px}.icon-button.xl.thin{width:104px}.icon-button.xl.wide{width:184px}.icon-button.xl:active,.icon-button.xl.selected{--radius:16px}