.button{--button-text-color: var(--color-neutral-100);--button-background-color: var(--color-neutral-900);--button-border-color: var(--color-neutral-900);--button-outline-color: var(--color-primary-500);display:flex;overflow:visible;width:auto;height:-moz-fit-content;height:fit-content;justify-content:center;align-items:center;padding:var(--spacing-3) var(--spacing-5);border-radius:var(--spacing-2);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--button-border-color);cursor:pointer;background-color:var(--button-background-color);color:var(--button-text-color);font:var(--font-button);gap:var(--spacing-3);letter-spacing:1px;line-height:1.5;text-decoration:none;text-transform:uppercase;text-wrap:nowrap;transition:background-color ease var(--duration-long),border-color ease var(--duration-long),color ease var(--duration-long),box-shadow ease var(--duration-long)}.button:focus{outline:none}.button:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:2px}.button:disabled{cursor:not-allowed}.button--default{--button-background-color: var(--color-neutral-900);--button-text-color: var(--color-neutral-100)}.button--default:hover{--button-background-color: var(--color-primary-500);--button-border-color: var(--color-primary-500)}.button--default:active{--button-background-color: var(--color-primary-700)}.button--default:disabled{--button-border-color: var(--color-neutral-500);--button-background-color: var(--color-neutral-500);--button-text-color: var(--color-neutral-800)}.button--link{--button-text-color: var(--color-neutral-900);--button-background-color: transparent;padding:0;border:none}.button--link:hover{--button-text-color: var(--color-primary-500)}.button--link:active{--button-text-color: var(--color-primary-700)}.button--link:disabled{--button-background-color: transparent;--button-text-color: var(--color-neutral-600)}.button--link[data-active]{--button-text-color: var(--color-primary-500);text-decoration:underline}.button--outline{--button-background-color: transparent;--button-text-color: var(--color-neutral-900)}.button--outline:hover{--button-background-color: var(--color-primary-50);--button-border-color: var(--color-primary-500);--button-text-color: var(--color-primary-500)}.button--outline:active{--button-border-color: var(--color-primary-700);--button-text-color: var(--color-primary-700)}.button--outline:disabled{--button-background-color: transparent;--button-border-color: var(--color-neutral-800);--button-text-color: var(--color-neutral-800)}.button--destructive{--button-border-color: var(--color-orange-300);--button-background-color: var(--color-orange-300);--button-text-color: var(--color-neutral-100)}.button--destructive:hover{--button-border-color: var(--color-orange-100);--button-background-color: var(--color-orange-100);--button-text-color: var(--color-orange-300)}.button--destructive:active{--button-border-color: var(--color-orange-500);--button-background-color: var(--color-orange-500);--button-text-color: var(--color-neutral-100)}.button--destructive:disabled{--button-border-color: var(--color-neutral-500);--button-background-color: var(--color-neutral-500);--button-text-color: var(--color-neutral-800)}.button--destructive-outline{--button-background-color: transparent;--button-border-color: var(--color-orange-300);--button-text-color: var(--color-orange-300)}.button--destructive-outline:hover{--button-background-color: var(--color-orange-100)}.button--destructive-outline:active{--button-border-color: var(--color-orange-500);--button-text-color: var(--color-orange-500)}.button--destructive-outline:disabled{--button-background-color: transparent;--button-border-color: var(--color-neutral-800);--button-text-color: var(--color-neutral-800)}@media (prefers-reduced-motion: no-preference){.button.button--loading{position:relative;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}.button.button--loading:after{position:absolute;width:16px;height:16px;border:2px solid transparent;border-radius:50%;border-top-color:transparent;border-top-color:var(--button-text-color);margin:auto;animation:button-spinner 1s ease infinite;content:"";inset:0}@keyframes button-spinner{0%{transform:rotate(0)}to{transform:rotate(1turn)}}}