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