.button{position:relative;display:flex;align-items:center;justify-content:center;border-radius:4px;gap:4px;cursor:pointer;transition:.1s ease-in-out;outline:none;border-width:1px;border-style:solid;font:var(--button-font);background-color:var(--button-bg);border-color:var(--button-border-color);color:var(--text-color)}.button:hover:not(.button:disabled){background-color:var(--button-bg-hover)}.button:active:not(.button:disabled){background-color:var(--button-bg-active)}.button.-loading{color:rgba(0,0,0,0);cursor:not-allowed}.button:disabled{cursor:not-allowed;opacity:var(--opacity-disabled)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.button[data-size=S]{height:24px;padding-inline:16px;--button-font:var(--font-button-s);--loader-size:12px;--icon-size:12px}.button[data-size=S][data-has-left-icon=true]{padding-left:8px}.button[data-size=S][data-has-right-icon=true]{padding-right:8px}.button[data-size=M]{height:32px;padding-inline:20px;--button-font:var(--font-button-m);--loader-size:16px;--icon-size:16px}.button[data-size=M][data-has-left-icon=true]{padding-left:12px}.button[data-size=M][data-has-right-icon=true]{padding-right:12px}.button[data-size=L]{height:40px;padding-inline:24px;--button-font:var(--font-button-l);--loader-size:20px;--icon-size:20px}.button[data-size=L][data-has-left-icon=true]{padding-left:16px}.button[data-size=L][data-has-right-icon=true]{padding-right:16px}.button .loader{position:absolute;top:50%;left:50%;translate:-50% -50%;--loader-color:var(--text-color)}.button svg{width:var(--icon-size);height:var(--icon-size)}