.button{cursor:pointer;width:fit-content;display:inline-flex}.button>div{display:contents}.button>div>button>svg{flex-shrink:0;width:1em;height:1em}.button>div>button{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-control-block) var(--space-control-inline);border-radius:var(--radius-control);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:inherit;border:var(--border-width) solid transparent;transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);white-space:nowrap;background-color:var(--button-bg,var(--color-accent));color:var(--button-fg,var(--color-accent-on));border-color:var(--button-border,transparent);outline:none;display:inline-flex}.button>div>button:hover{background-color:var(--button-bg-hover);border-color:var(--button-border-hover,var(--button-border,transparent))}.button>div>button:active{background-color:var(--button-bg-active);border-color:var(--button-border-active,var(--button-border,transparent))}.button>div>button:focus-visible{box-shadow:var(--focus-ring);outline:none}.button:not([data-variant]),.button[data-variant=primary]{--button-bg:var(--color-accent);--button-fg:var(--color-accent-on);--button-border:transparent;--button-bg-hover:oklch(from var(--color-accent) calc(l + .05) c h);--button-bg-active:oklch(from var(--color-accent) calc(l - .05) c h);--button-border-hover:transparent}.button[data-variant=secondary]{--button-bg:var(--color-surface);--button-fg:var(--color-fg);--button-border:var(--color-border);--button-bg-hover:oklch(from var(--color-surface) calc(l + .05) c h);--button-bg-active:oklch(from var(--color-surface) calc(l - .05) c h);--button-border-hover:var(--color-border)}.button[data-variant=outline]{--button-bg:transparent;--button-fg:var(--color-accent);--button-border:var(--color-accent-border);--button-bg-hover:var(--color-accent-subtle);--button-bg-active:var(--color-accent-dim);--button-border-hover:var(--color-accent-border)}.button[data-variant=ghost]{--button-bg:transparent;--button-fg:var(--color-fg);--button-border:transparent;--button-bg-hover:var(--color-accent-subtle);--button-bg-active:var(--color-accent-dim);--button-border-hover:transparent}.button[data-variant=danger]{--button-bg:var(--color-negative);--button-fg:var(--color-negative-on);--button-border:transparent;--button-bg-hover:oklch(from var(--color-negative) calc(l + .05) c h);--button-bg-active:oklch(from var(--color-negative) calc(l - .05) c h);--button-border-hover:transparent}.button[data-size=sm]>div>button{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);border-radius:var(--radius-control)}.button[data-size=lg]>div>button{padding:var(--space-3) var(--space-5);font-size:var(--font-size-md);border-radius:var(--radius-container)}.button[data-disabled]{opacity:var(--opacity-disabled);pointer-events:none;cursor:not-allowed}.button[data-state=loading]{opacity:var(--opacity-loading);pointer-events:none;cursor:wait}.button[data-block]{width:100%;display:flex}.button[data-block]>div>button{width:100%}.button[data-icon-only]>div>button{padding:var(--space-control-block)}.button[data-icon-only][data-size=sm]>div>button{padding:var(--space-1)}.button[data-icon-only][data-size=lg]>div>button{padding:var(--space-3)}.button[data-stitch-toggle]{border-radius:var(--radius-full);aspect-ratio:1;--button-bg:var(--color-accent);--button-fg:var(--color-accent-on);--icon-color:var(--button-fg);--button-border:var(--color-accent-border);--button-bg-hover:oklch(from var(--color-accent) calc(l + sign(.5 - l) * .05) c h);--button-bg-active:oklch(from var(--color-accent) calc(l - sign(.5 - l) * .08) c h);--button-border-hover:var(--color-accent-border)}.button[data-stitch-toggle]>div>button,.button[data-stitch-toggle][data-size]>div>button,.button[data-stitch-toggle][data-icon-only]>div>button{border-radius:var(--radius-full);aspect-ratio:1;box-shadow:var(--shadow-sm);padding:calc(3px * var(--density-scale,1))}.button[data-stitch-toggle][data-stitched]{--button-bg:var(--color-fg);--button-fg:var(--color-bg);--icon-color:var(--button-fg);--button-border:var(--color-border);--button-bg-hover:oklch(from var(--color-fg) calc(l - sign(l - .5) * .06) c h);--button-bg-active:oklch(from var(--color-fg) calc(l - sign(l - .5) * .12) c h);--button-border-hover:var(--color-border)}