.button{--button-background:var(--ui-action);--button-background-hover:var(--ui-action-hover);--button-color:var(--ui-action-text);--button-border:var(--control-primary-border);--button-inset-light:var(--control-highlight);--button-inset-shade:var(--control-shade);--button-depth-rest:var(--control-depth-primary-rest);--button-depth-hover:var(--control-depth-primary-hover);--button-depth-active:var(--control-depth-primary-active);isolation:isolate;min-height:var(--control-size-sm);justify-content:center;align-items:center;gap:var(--control-content-gap);border:var(--border-width) solid var(--button-border);border-radius:var(--shape-radius-control);background:linear-gradient(to bottom, var(--button-inset-light), transparent 42%), var(--button-background);box-shadow:var(--button-depth-rest);color:var(--button-color);font:inherit;font-weight:var(--control-font-weight);letter-spacing:var(--control-letter-spacing);text-wrap:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--motion-fast) var(--ease-press), box-shadow var(--motion-standard) var(--motion-ease-standard), background-color var(--motion-standard) var(--motion-ease-standard), border-color var(--motion-standard) var(--motion-ease-standard), color var(--motion-standard) var(--motion-ease-standard), filter var(--motion-standard) var(--motion-ease-standard), opacity var(--motion-standard) var(--motion-ease-standard);-webkit-tap-highlight-color:transparent;line-height:1;text-decoration:none;display:inline-flex;position:relative;overflow:hidden;transform:translateY(0)scale(1)}.button:before{inset:var(--control-layer-inset) var(--control-layer-inset) auto;z-index:-1;height:var(--control-layer-height);border-radius:calc(var(--shape-radius-control) - var(--control-layer-radius-adjustment)) calc(var(--shape-radius-control) - var(--control-layer-radius-adjustment)) var(--control-layer-tail-radius) var(--control-layer-tail-radius);background:linear-gradient(to bottom, var(--control-layer-highlight), transparent);content:"";pointer-events:none;position:absolute}@media (hover:hover) and (pointer:fine){.button:not(:disabled):hover{background:linear-gradient(to bottom, var(--button-inset-light), transparent 42%), var(--button-background-hover);box-shadow:var(--button-depth-hover);border-color:color-mix(in srgb, var(--button-border) 82%, var(--ui-accent));filter:saturate(1.04)brightness(1.02);transform:translateY(var(--control-hover-offset))}}.button:not(:disabled):active{box-shadow:var(--button-depth-active);filter:none;transform:translateY(var(--control-active-offset)) scale(var(--control-active-scale));transition-duration:var(--motion-press)}.button:disabled{cursor:not-allowed;opacity:var(--control-disabled-opacity);box-shadow:var(--shadow-control-disabled);transform:none}.button[data-loading=true]{cursor:progress}.button[data-variant=secondary]{--button-background:var(--ui-surface);--button-background-hover:var(--ui-surface-subtle);--button-color:var(--ui-text);--button-border:var(--ui-border-strong);--button-inset-light:var(--control-secondary-inset-light);--button-inset-shade:var(--control-secondary-inset-shade);--button-depth-rest:var(--control-depth-secondary-rest);--button-depth-hover:var(--control-depth-secondary-hover);--button-depth-active:var(--control-depth-secondary-active)}.button[data-variant=ghost]{--button-background:transparent;--button-background-hover:var(--ui-surface-subtle);--button-color:var(--ui-text);--button-border:var(--control-ghost-border);--button-inset-light:var(--control-ghost-inset-light);--button-inset-shade:var(--control-ghost-inset-shade);--button-depth-rest:var(--control-depth-ghost-rest);--button-depth-hover:var(--control-depth-ghost-hover);--button-depth-active:var(--control-depth-ghost-active);box-shadow:var(--button-depth-rest)}.button[data-size=sm]{min-height:var(--control-size-sm);padding:var(--control-padding-sm);font-size:var(--control-text-sm)}.button[data-size=md]{min-height:var(--control-size-md);padding:var(--control-padding-md);font-size:var(--control-text-md)}.button[data-size=lg]{min-height:var(--control-size-lg);padding:var(--control-padding-lg);font-size:var(--control-text-lg)}.spinner{width:var(--control-spinner-size);height:var(--control-spinner-size);border:var(--control-spinner-border) solid currentColor;border-radius:var(--shape-radius-pill);opacity:var(--control-spinner-opacity);animation:button-spin var(--motion-spinner) linear infinite;border-right-color:#0000;flex:none}@keyframes button-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.button,.button:not(:disabled):active,.button:not(:disabled):hover{transition:none}.spinner{animation:none}}
