.icon-button{position:relative;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;transition:.1s ease-in-out;outline:none;border-width:1px;border-style:solid;background-color:var(--button-bg);border-color:var(--button-border-color);color:var(--text-color);flex-shrink:0}.icon-button:hover:not(.icon-button:disabled){background-color:var(--button-bg-hover)}.icon-button:active:not(.icon-button:disabled){background-color:var(--button-bg-active)}.icon-button.-loading{cursor:not-allowed}.icon-button:disabled{cursor:not-allowed;opacity:var(--opacity-disabled)}.icon-button[data-variant=filled]{--button-bg:var(--button-color);--button-bg-hover:var(--button-color-hover);--button-bg-active:var(--button-color-active);--button-border-color:transparent;--text-color:var(--button-color-contrast)}.icon-button[data-variant=outlined]{--button-bg:transparent;--button-bg-hover:var(--button-color-hover-tone);--button-bg-active:var(--button-color-active-tone);--button-border-color:var(--button-color);--text-color:var(--button-color)}.icon-button[data-variant=text]{--button-bg:transparent;--button-bg-hover:var(--button-color-hover-tone);--button-bg-active:var(--button-color-active-tone);--button-border-color:transparent;--text-color:var(--button-color)}.icon-button[data-color=primary]{--button-color:var(--primary-default);--button-color-hover:var(--primary-hover);--button-color-hover-tone:var(--primary-hover-tone);--button-color-active:var(--primary-active);--button-color-active-tone:var(--primary-active-tone);--button-color-contrast:var(--primary-contrast)}.icon-button[data-color=secondary]{--button-color:var(--secondary-default);--button-color-hover:var(--secondary-hover);--button-color-hover-tone:var(--secondary-hover-tone);--button-color-active:var(--secondary-active);--button-color-active-tone:var(--secondary-active-tone);--button-color-contrast:var(--secondary-contrast)}.icon-button[data-color=success]{--button-color:var(--success-default);--button-color-hover:var(--success-hover);--button-color-hover-tone:var(--success-hover-tone);--button-color-active:var(--success-active);--button-color-active-tone:var(--success-active-tone);--button-color-contrast:var(--success-contrast)}.icon-button[data-color=info]{--button-color:var(--info-default);--button-color-hover:var(--info-hover);--button-color-hover-tone:var(--info-hover-tone);--button-color-active:var(--info-active);--button-color-active-tone:var(--info-active-tone);--button-color-contrast:var(--info-contrast)}.icon-button[data-color=warning]{--button-color:var(--warning-default);--button-color-hover:var(--warning-hover);--button-color-hover-tone:var(--warning-hover-tone);--button-color-active:var(--warning-active);--button-color-active-tone:var(--warning-active-tone);--button-color-contrast:var(--warning-contrast)}.icon-button[data-color=error]{--button-color:var(--error-default);--button-color-hover:var(--error-hover);--button-color-hover-tone:var(--error-hover-tone);--button-color-active:var(--error-active);--button-color-active-tone:var(--error-active-tone);--button-color-contrast:var(--error-contrast)}.icon-button[data-size=S]{width:24px;height:24px;--loader-size:12px;--icon-size:12px}.icon-button[data-size=M]{width:32px;height:32px;--loader-size:16px;--icon-size:16px}.icon-button[data-size=L]{width:40px;height:40px;--loader-size:20px;--icon-size:20px}.icon-button svg{width:var(--icon-size);height:var(--icon-size)}