.button{border-radius:var(--border-radius-2);font:var(--font-text-sm);font-weight:500;padding:1rem var(--spacing-4);position:relative}.button.button-icon-only{padding:1rem}.button,.button .content{display:inline-flex;justify-content:center;align-items:center;gap:var(--spacing-2)}.button svg{width:2rem;height:auto}.button-primary{background-color:var(--color-violet-9);color:var(--color-mauve-1);border:.1rem solid var(--color-violet-9)}html.dark .button-primary{color:var(--color-mauve--12)}.button-primary-destructive{background-color:var(--color-red-9);color:var(--color-mauve-1);border:.1rem solid var(--color-red-9)}.button-primary-destructive:focus{box-shadow:var(--shadow-outline-red)}.button-secondary-color{background-color:var(--color-violet-3);color:var(--color-violet-10);border:.1rem solid var(--color-violet-3)}.button-secondary-gray{background-color:var(--color-mauve-1);color:var(--color-mauve-12);border:.1rem solid var(--color-mauve-7)}.button-secondary-gray:focus{box-shadow:var(--shadow-outline-mauve)}.button-tertiary-color{background-color:transparent;color:var(--color-violet-10);border:.1rem solid transparent}.button-tertiary-gray{background-color:transparent;color:var(--color-mauve-12);border:.1rem solid transparent}.button-tertiary-gray:focus{box-shadow:var(--shadow-outline-mauve)}.button-spinner .content{visibility:hidden}.button-spinner .spinner-wrapper{position:absolute;width:100%;height:100%;display:grid;place-items:center}.button-spinner .spinner{width:1.6rem;height:1.6rem;border-radius:50%;border:.2rem solid transparent;border-top-color:var(--color-mauve-12);animation:rotate .8s linear infinite}.button-spinner.button-primary .spinner,.button-spinner.button-primary-destructive .spinner{border-top-color:var(--color-mauve-1)}html.dark .button-spinner.button-primary .spinner,html.dark .button-spinner.button-primary-destructive .spinner{border-top-color:var(--color-mauve-12)}html.dark .button-primary-destructive{color:var(--color-mauve-12)}.button-spinner.button-secondary-color .spinner,.button-spinner.button-tertiary-color .spinner{border-top-color:var(--color-violet-10)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(hover:hover){.button-primary:hover:not(:disabled){background-color:var(--color-violet-10);border-color:var(--color-violet-10)}.button-primary-destructive:hover:not(:disabled){background-color:var(--color-red-10);border-color:var(--color-red-10)}.button-secondary-color:hover:not(:disabled){background-color:var(--color-violet-4);border-color:var(--color-violet-4)}.button-secondary-gray:hover:not(:disabled){background-color:var(--color-mauve-4);border-color:var(--color-mauve-8)}.button-tertiary-color:hover:not(:disabled){background-color:var(--color-violet-4);border-color:var(--color-violet-4)}.button-tertiary-gray:hover:not(:disabled){background-color:var(--color-mauve-4);border-color:var(--color-mauve-4)}}@media(max-width:64em){.button{padding:var(--spacing-2) 1.4rem}}