.button{--_bg:var(--button-primary-bg);--_bg-hover:var(--button-primary-bg-hover);--_border:var(--button-primary-border);--_border-hover:var(--button-primary-border-hover);--_color:var(--button-primary-text);--_color-hover:var(--button-primary-text-hover);--_focus-ring:var(--button-primary-focus-ring);appearance:none;background-color:var(--_bg);border-color:var(--_border);color:var(--_color);cursor:pointer;font-family:var(--font-primary);font-size:var(--body-sm);font-weight:var(--font-weight-700);align-items:center;gap:var(--size-4);inline-size:fit-content;max-inline-size:30rem;padding-block:var(--size-205);padding-inline:var(--size-6);text-align:left;text-wrap:wrap;transition:var(--transition-soft-linear);border-style:solid;border-width:2px;border-radius:0;text-decoration:none;display:flex}.button:hover,.button:active{background-color:var(--_bg-hover);border-color:var(--_border-hover);color:var(--_color-hover);text-decoration:none}.button:focus-visible{outline-color:var(--_focus-ring);outline-offset:2px;border-radius:2px}.button[aria-expanded=true]:focus:after{border-color:var(--blue-500)}.button:disabled{--_bg:var(--grey-100);--_border:var(--grey-100);--_color:var(--grey-700);cursor:not-allowed;pointer-events:none}.button svg{block-size:1em;inline-size:1em;display:inline-block}.button svg path{color:inherit}.button--primary{--_bg:var(--button-primary-bg);--_bg-hover:var(--button-primary-bg-hover);--_border:var(--button-primary-border);--_border-hover:var(--button-primary-border-hover);--_color:var(--button-primary-text);--_color-hover:var(--button-primary-text-hover);--_focus-ring:var(--button-primary-focus-ring)}.button--secondary{--_bg:var(--button-secondary-bg);--_bg-hover:var(--button-secondary-bg-hover);--_border:var(--button-secondary-border);--_border-hover:var(--button-secondary-border-hover);--_color:var(--button-secondary-text);--_color-hover:var(--button-secondary-text-hover);--_focus-ring:var(--button-secondary-focus-ring)}.button--outlined{--_bg:var(--button-outlined-bg);--_bg-hover:var(--button-outlined-bg-hover);--_border:var(--button-outlined-border);--_border-hover:var(--button-outlined-border-hover);--_color:var(--button-outlined-text);--_color-hover:var(--button-outlined-text-hover);--_focus-ring:var(--button-outlined-focus-ring)}.button--ghost{--_bg:var(--button-ghost-bg);--_bg-hover:var(--button-ghost-bg-hover);--_border:var(--button-ghost-border);--_border-hover:var(--button-ghost-border-hover);--_color:var(--button-ghost-text);--_color-hover:var(--button-ghost-text-hover);--_focus-ring:var(--button-ghost-focus-ring)}.button--pill{--_bg:var(--button-pill-bg);--_bg-hover:var(--button-pill-bg-hover);--_border:var(--button-pill-border);--_border-hover:var(--button-pill-border-hover);--_color:var(--button-pill-text);--_color-hover:var(--button-pill-text-hover);--_focus-ring:var(--button-pill-focus-ring);border-radius:var(--radius-round);gap:0}.button--pill:focus-visible{border-radius:var(--radius-round)}.button--square{block-size:calc(var(--size-10) + 4px);inline-size:var(--size-12);padding:var(--size-205)}.button--square svg path,.button--square:hover svg path,.button--square:active svg path{fill:currentColor}