.button{--btn-bg: transparent;--btn-color: var(--color-text-default);--btn-border: transparent;--btn-hover-bg: transparent;--btn-hover-color: var(--btn-color);--btn-hover-border: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:42px;min-width:80px;flex-shrink:0;white-space:nowrap;padding-inline:var(--space-4);background-color:var(--btn-bg);color:var(--btn-color);border:1px solid var(--btn-border);border-radius:200px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-book);line-height:130%;letter-spacing:var(--tracking-snug);text-decoration:none;outline:none;transition:background-color .35s ease-in-out,color .35s ease-in-out,border-color .35s ease-in-out,opacity .35s ease-in-out;box-shadow:0 1px 1px #00000014,0 1px 1px -1px #0000000f}.button:hover{background-color:var(--btn-hover-bg);border-color:var(--btn-hover-border);color:var(--btn-hover-color)}.button:focus-visible{outline:2px solid var(--color-action);outline-offset:2px}.button:disabled,.button[data-disabled]{pointer-events:none;opacity:.5}.button>svg{pointer-events:none;flex-shrink:0;width:1em;height:1em}.button__text{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}.button__icon{display:inline-flex;flex-shrink:0;pointer-events:none;width:1.1rem!important;height:1.1rem!important;color:inherit}.button:has(>.button__icon:only-child){aspect-ratio:1;height:auto;min-width:20px;border-radius:0;padding:10px}.button--full-width{width:100%}.button--primary{--btn-bg: var(--color-surface);--btn-color: var(--color-text-default);--btn-hover-bg: color-mix(var(--color-bg-subtle), #e6e6e6 20%);--btn-hover-color: var(--color-text-default)}.button--secondary{--btn-bg: var(--color-surface-inverse);--btn-color: var(--color-text-on-dark);--btn-hover-bg: color-mix(var(--color-border-strong), #e6e6e6 20%);--btn-hover-color: var(--color-text-subtle)}.button--tertiary{--btn-bg: var(--color-bg-subtle);--btn-color: var(--color-text-default);--btn-hover-bg: color-mix(var(--color-border-default), #e6e6e6 20%);--btn-hover-color: var(--color-text-default)}.button--ghost{--btn-hover-bg: var(--color-bg-subtle);box-shadow:none}.button--link{--btn-color: var(--color-supporting-blue);--btn-hover-bg: transparent;height:auto;min-width:0;padding:0;border-radius:0;box-shadow:none;text-underline-offset:4px}.button--link:hover{text-decoration:underline}