.button{background:var(--color-primary);cursor:pointer;color:#fff;border:none;justify-content:center;height:48px;margin:0;padding:0;transition:box-shadow .3s ease-in,all .1s ease-in;display:flex;position:relative;box-shadow:0 1px 5px #0000}.button .button-mat{width:0%;height:100%;transition:all .3s ease-in-out;display:flex;position:absolute;top:0;left:0;overflow:hidden}.button .button-mat:before{content:"";background:linear-gradient(#0000 90%,#fff 90% 100%);width:100%;height:100%;transition:width .3s ease-in-out;display:flex;position:absolute;top:0;left:0}.button .button-mat:after{content:"";background:linear-gradient(#0000 75%,#fff 75% 100%);width:4px;height:100%;transition:width .3s ease-in-out;display:flex;position:absolute;top:0;left:0}.button:hover .button-mat{width:100%}.button:hover{box-shadow:0 1px 10px #00000059}.button:active{box-shadow:0 0 5px #00000059}.button .button-content{align-items:center;display:flex;position:relative}.button .button-content .label{anchor-name:--thumb;align-items:center;font-family:Figtree;font-size:14px;display:flex}.button .button-content .spinner{position-anchor:--thumb;border-radius:50%;width:40px;height:40px;position:absolute;left:-44px}.button.outline{border:2px solid var(--color-primary);color:var(--color-primary);background:0 0}.button.outline .button-mat:before{background:linear-gradient(0deg, var(--color-primary) 0%, var(--color-primary) 5%, transparent 5%)}.button.outline .button-mat:after{background:linear-gradient(0deg, var(--color-primary) 0%, var(--color-primary) 25%, transparent 25%)}.button.disabled{cursor:not-allowed;background:var(--greyscale-400);color:var(--greyscale-500)}.button.disabled:hover{box-shadow:none}.button.disabled:hover .button-mat{width:0%}.button.loading{cursor:not-allowed;background:var(--greyscale-700);color:var(--greyscale-300)}.button.loading:hover{box-shadow:none}.button.loading:hover .button-mat{width:0%}