.button{--border-width:2px;--svg-color:var(--color);position:relative;cursor:pointer;color:var(--color);background-color:var(--bg-color);font-family:Outfit;font-weight:400;font-size:.85rem;width:var(--width);border-radius:8px;padding:11px 18px;display:flex;justify-content:center;text-align:center;align-items:center;gap:10px;border:var(--border-width) solid var(--bg-color);transition:background-color .4s,color .4s}.button svg{--color:var(--svg-color)!important}.button.disabled{cursor:not-allowed;--bg-color:var(--color-background-light)!important;--color:var(--color-text-primary)!important}.button.disabled:after{content:attr(data-disabled-tooltip)!important;opacity:0;position:absolute;bottom:calc(100% + 10px);color:var(--white);background-color:var(--color-error);padding:6px 15px;border-radius:8px;transition:opacity .3s;height:unset;font-size:.8rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;box-shadow:none;border:none;left:0;right:0;margin:auto}.button.with-tooltip:hover:after{opacity:1;animation:none}.button.loading:hover{transition:none;color:transparent}.button-loader{width:20px;height:20px;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 -2px 0 var(--color)}.button-loader-container{display:flex;width:100%;height:100%;background-color:var(--bg-color);position:absolute!important;justify-content:center;align-items:center}.button:not(.disabled,.loading):hover{background-color:initial;border-color:transparent;--color:var(--hover-color)!important;--svg-color:var(--hover-color)!important}.button:before,.button:not(.with-tooltip):after{content:"";position:absolute;border:var(--border-width) solid var(--bg-color);border-top-width:0;border-right-width:0;bottom:calc(-1 * var(--border-width));left:calc(-1 * var(--border-width));border-radius:8px;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width))}.button:before{border-bottom-width:0;border-left-width:0;bottom:auto;left:auto;right:calc(-1 * var(--border-width));top:calc(-1 * var(--border-width));border-bottom-left-radius:0;border-top-width:var(--border-width);border-right-width:var(--border-width)}.button:hover:before{animation:buttonBorderBefore .35s linear;height:0;width:0;opacity:0}.button:hover:not(.with-tooltip):after{animation:buttonBorderAfter .7s linear;height:0}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes buttonBorderBefore{0%{height:calc(100% + var(--border-width));width:calc(100% + var(--border-width))}50%{height:0;width:calc(100% + var(--border-width));right:calc(-1 * var(--border-width));border-bottom-right-radius:0}99%{opacity:1}to{opacity:0;width:0;right:calc(100%)}}@keyframes buttonBorderAfter{0%{border-top-left-radius:10px;height:calc(100% + var(--border-width))}40%{border-top-left-radius:0}50%{height:calc(100% + var(--border-width))}75%{height:0}to{border-radius:2px}}