.button{height:auto;display:flex;align-items:center;column-gap:7px;cursor:pointer;padding:3px;width:fit-content;transition-property:background-color,color,transform;transition-duration:.2s;transition-timing-function:ease-out;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.button>svg{aspect-ratio:1/1;width:auto;height:20px;pointer-events:none}.button > *svg:last-child{margin-left:auto}.button:active{transform:scale(.98)}.button.primary{color:var(--white);background-color:var(--accent)}.button.primary>*{color:var(--white)}.button.primary>svg path{fill:var(--white)}.button.primary:hover:not(.disabled):not(.loading){opacity:.8}.button.secondary{color:var(--font-d);background-color:var(--bg-d)}.button.secondary>*{color:var(--font-d)}.button.secondary>svg path{fill:var(--font-d)}.button.secondary:hover:not(.disabled):not(.loading){color:var(--font-u);background-color:var(--bg-t)}.button.secondary:hover:not(.disabled):not(.loading)>*{color:var(--font-u)}.button.secondary:hover:not(.disabled):not(.loading)>svg path{fill:var(--font-u)}.button.ghost{color:var(--font-d);background-color:transparent}.button.ghost>*{color:var(--font-d)}.button.ghost>svg path{fill:var(--font-d)}.button.ghost:hover:not(.disabled):not(.loading){color:var(--font-u);background-color:var(--bg-t)}.button.ghost:hover:not(.disabled):not(.loading)>*{color:var(--font-u)}.button.ghost:hover:not(.disabled):not(.loading)>svg path{fill:var(--font-u)}.button.outline{color:var(--font-u);background-color:transparent;border:1px solid var(--bg-t)}.button.outline>*{color:var(--font-d)}.button.outline>svg path{fill:var(--font-u)}.button.outline:hover:not(.disabled):not(.loading){background-color:var(--bg-t)}.button.destructive{color:var(--white);background-color:var(--red)}.button.destructive>svg path{fill:var(--white)}.button.loading{color:transparent!important;cursor:not-allowed;opacity:.5}.button.loading *:not(.loading-circle){opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.button.loading .loading-circle{position:absolute;top:50%;left:50%;translate:-50% -50%}.button.disabled{opacity:.5;cursor:not-allowed}.button.disabled svg path{fill:var(--font-d)}.button.disabled .loading-circle{display:none;cursor:not-allowed;opacity:.6}.button .ripple{width:0px;aspect-ratio:1/1;background:var(--ripple-gradient);position:absolute;transform:translate(-50%,-50%);border-radius:100%;animation:grow 1s ease-out}@keyframes grow{0%{width:0px;opacity:1}to{width:500%;opacity:0}}