.button{--button-fill:var(--color-accent-fill-loud);--button-color:var(--color-on-loud);--_padding-block:.45em;--_padding-inline:.75em;--_form-control-height:round(calc(2 * var(--_padding-block) + 1em * 1.25), 1px);cursor:pointer;white-space:nowrap;font:inherit;font-family:var(--font-sans,system-ui, sans-serif);font-size:var(--form-control-font-size,var(--text-base));background-color:var(--button-fill);border-radius:var(--radius-button);border-color:#0000;border-style:var(--border-style);border-width:var(--border-width-thin);color:var(--button-color);font-weight:var(--font-weight-medium);justify-content:center;align-items:center;gap:var(--space-2xs);min-height:var(--_form-control-height);padding-block:0;padding-inline:var(--_padding-inline);transition-property:color,background-color,border-color,box-shadow;transition-timing-function:var(--ease-out);transition-duration:var(--transition-normal);text-decoration:none;display:inline-flex}.button:hover{background-color:color-mix(in oklab, var(--button-fill), var(--color-mix-hover,black 5%))}.button:active{background-color:color-mix(in oklab, var(--button-fill), var(--color-mix-active,black 10%))}.button:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--button-fill) 25%, transparent);border-color:var(--button-fill);outline:none}.button:disabled{opacity:.5;cursor:not-allowed}.button--icon{min-height:auto;padding:var(--space-3xs)}.button--ghost{--button-fill:transparent;--button-color:var(--color-on-normal)}.button--link{--button-color:var(--color-text-link,revert);min-height:auto;color:;font-weight:inherit;background:0 0;border:none;padding:0}.button--link:hover{text-decoration-skip-ink:auto;text-underline-offset:.25em;background:0 0;text-decoration:underline}.button--link:active{background:0 0}.button--link:focus-visible{box-shadow:none;outline-color:var(--focus-ring-color,currentColor);outline-style:var(--focus-ring-style,auto);outline-offset:var(--focus-ring-offset,4px);outline-width:var(--focus-ring-width,2px);border-color:#0000}.button--danger{--button-fill:transparent;--button-color:var(--color-rose-600)}.button--toggle{--button-fill:transparent;--button-color:var(--color-on-normal);border-color:var(--color-border-loud)}.button--toggle[aria-pressed=true]{--button-fill:var(--form-control-activated-color);--button-color:var(--color-accent-on-loud);border-color:#0000}
