.filled-button{box-shadow:0 5px 4px rgba(0,0,0,.25);background:var(--background-color);border:3px solid var(--background-color);color:var(--color);transition:box-shadow .3s;transition:background-color .4s,color .4s;border-color:var(--background-color)}.filled-button:not(.disabled):hover{box-shadow:0 0 0 rgba(0,0,0,.25);color:var(--hover-color);background-color:initial;border-color:transparent}.filled-button:not(.disabled):hover svg{--color:var(--hover-color)!important}.filled-button:after,.filled-button:before{content:"";position:absolute;border-left:3px solid var(--background-color);border-bottom:3px solid var(--background-color);border-right-width:3px;border-top-width:3px;border-top:0 solid var(--background-color);border-right:0 solid var(--background-color);bottom:-3px;left:-3px;border-radius:var(--border-radius);width:calc(100% + 3px);height:calc(100% + 3px)}.filled-button:before{bottom:auto;left:auto;right:-3px;top:-3px;border-bottom-left-radius:0;border-width:3px 3px 0 0}.filled-button:hover:before{animation:buttonBorderBefore .35s linear;height:0;width:0;opacity:0}.filled-button:hover:after{animation:buttonBorderAfter .7s linear;height:0}.filled-button:hover .button-loader-container{background-color:var(--transparent)}.filled-button:hover .button-loader{box-shadow:0 -2px 0 var(--hover-color)}.button-loader-container{display:flex;width:100%;height:100%;background-color:var(--background-color);position:absolute!important;justify-content:center;align-items:center}.filled-button.loading:hover{transition:none;color:transparent}.filled-button.loading:hover svg{--color:transparent!important}.button-loader{width:20px;height:20px;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 -2px 0 var(--color)}.filled-button-container{position:relative;display:inline-block}.button.disabled{pointer-events:auto}.button.disabled:after,.button.disabled:before{content:unset}.button.with-tooltip:after{content:attr(disabledtooltip);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}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes buttonBorderBefore{0%{height:calc(100% + 3px);width:calc(100% + 3px)}50%{height:0;width:calc(100% + 3px);right:-3px;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% + 3px)}40%{border-top-left-radius:0}50%{height:calc(100% + 3px)}75%{height:0}to{border-radius:2px}}