@layer components{.ui-button{--button-background:var(--button-section-background,var(--base-surface-background));--button-background-hover:var(--button-section-background-hover,var(--color-neutral-light));--button-border:var(--button-section-border,var(--color-neutral-light));--button-text:var(--button-section-text,var(--base-text-on-surface));--button-primary-background:var(--color-primary);--button-primary-background-hover:var(--color-primary-light);--button-primary-border:var(--color-primary);--button-primary-text:var(--color-on-primary);--button-secondary-background:var(--color-secondary);--button-secondary-background-hover:var(--color-secondary-light);--button-secondary-border:var(--color-secondary);--button-secondary-text:var(--color-on-secondary);--button-tertiary-background:var(--base-surface-background);--button-tertiary-background-hover:var(--color-neutral-light);--button-tertiary-border:var(--color-neutral-light);--button-tertiary-text:var(--base-text-on-surface);--button-focus-ring:var(--base-shadow-focus);--button-disabled-background:var(--color-neutral);--button-disabled-border:var(--color-neutral-light);--button-disabled-text:var(--color-neutral-darkest);border:1px solid var(--button-border);border-radius:var(--radius-button);background-color:var(--button-background);background-image:linear-gradient(to right, var(--button-background) 50%, var(--button-background-hover) 50%);width:fit-content;min-width:fit-content;max-width:100%;min-height:3rem;color:var(--button-text);font-family:var(--font-heading);white-space:nowrap;cursor:pointer;background-size:200%;background-clip:padding-box;justify-content:center;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;line-height:normal;display:inline-flex;position:relative;overflow:hidden}.ui-button--size-default{height:3rem;min-height:3rem;padding:.75rem 1.5rem}.ui-button--size-small{height:2.5rem;min-height:2.5rem;padding:.5rem 1.25rem}.ui-button--size-large{min-width:240px}.ui-button--icon-only{width:3rem;height:3rem;box-shadow:var(--shadow-elevation-1);padding:0}.ui-button--icon-only.ui-button--size-small{width:2.5rem;height:2.5rem}[data-section=default],[data-section=default] .ui-button{--button-section-background:var(--base-surface-background);--button-section-background-hover:var(--color-neutral-light);--button-section-border:var(--color-neutral-light);--button-section-text:var(--base-text-on-surface);--button-primary-background:var(--color-primary);--button-primary-background-hover:var(--color-primary-light);--button-primary-border:var(--color-primary);--button-primary-text:var(--color-on-primary);--button-secondary-background:var(--color-secondary);--button-secondary-background-hover:var(--color-secondary-light);--button-secondary-border:var(--color-secondary);--button-secondary-text:var(--color-on-secondary);--button-tertiary-background:var(--base-surface-background);--button-tertiary-background-hover:var(--color-neutral-light);--button-tertiary-border:var(--color-neutral-light);--button-tertiary-text:var(--base-text-on-surface)}[data-section=primary],[data-section=primary] .ui-button{--button-section-background:var(--base-surface-background);--button-section-background-hover:var(--color-primary-light);--button-section-border:var(--color-primary-lighter);--button-section-text:var(--color-surface);--button-primary-background:var(--color-secondary);--button-primary-background-hover:var(--color-secondary-light);--button-primary-border:var(--color-secondary);--button-primary-text:var(--color-on-secondary);--button-secondary-background:var(--color-on-secondary);--button-secondary-background-hover:var(--color-neutral-light);--button-secondary-border:var(--color-on-secondary);--button-secondary-text:var(--color-secondary);--button-tertiary-background:var(--base-surface-background);--button-tertiary-background-hover:var(--color-primary-light);--button-tertiary-border:var(--color-primary-lighter);--button-tertiary-text:var(--color-surface)}[data-section=secondary],[data-section=secondary] .ui-button{--button-section-background:var(--base-surface-background);--button-section-background-hover:var(--color-secondary-light);--button-section-border:var(--color-secondary-lighter);--button-section-text:var(--base-text-on-surface);--button-primary-background:var(--color-primary);--button-primary-background-hover:var(--color-primary-light);--button-primary-border:var(--color-primary);--button-primary-text:var(--color-on-primary);--button-secondary-background:var(--color-on-secondary);--button-secondary-background-hover:var(--color-neutral-light);--button-secondary-border:var(--color-on-secondary);--button-secondary-text:var(--color-secondary);--button-tertiary-background:var(--base-surface-background);--button-tertiary-background-hover:var(--color-secondary-light);--button-tertiary-border:var(--color-secondary-lighter);--button-tertiary-text:var(--base-text-on-surface)}[data-section=muted],[data-section=muted] .ui-button{--button-section-background:var(--base-surface-background);--button-section-background-hover:var(--color-neutral-light);--button-section-border:var(--color-neutral);--button-section-text:var(--base-text-on-surface);--button-primary-background:var(--color-primary);--button-primary-background-hover:var(--color-primary-light);--button-primary-border:var(--color-primary);--button-primary-text:var(--color-on-primary);--button-secondary-background:var(--color-secondary);--button-secondary-background-hover:var(--color-secondary-light);--button-secondary-border:var(--color-secondary);--button-secondary-text:var(--color-on-secondary);--button-tertiary-background:var(--base-surface-background);--button-tertiary-background-hover:var(--color-neutral-light);--button-tertiary-border:var(--color-neutral);--button-tertiary-text:var(--base-text-on-surface)}.ui-button--primary{--button-background:var(--button-primary-background,var(--color-primary));--button-background-hover:var(--button-primary-background-hover,var(--color-primary-light));--button-border:var(--button-primary-border,var(--color-primary));--button-text:var(--button-primary-text,var(--color-on-primary))}.ui-button--secondary{--button-background:var(--button-secondary-background,var(--color-secondary));--button-background-hover:var(--button-secondary-background-hover,var(--color-secondary-light));--button-border:var(--button-secondary-border,var(--color-secondary));--button-text:var(--button-secondary-text,var(--color-on-secondary))}.ui-button--tertiary{--button-background:var(--button-tertiary-background,var(--base-surface-background));--button-background-hover:var(--button-tertiary-background-hover,var(--color-neutral-light));--button-border:var(--button-tertiary-border,var(--color-neutral-light));--button-text:var(--button-tertiary-text,var(--base-text-on-surface))}.ui-button--destructive{--button-background:var(--color-danger-lightest);--button-background-hover:#fff;--button-border:var(--color-danger);--button-text:var(--color-danger)}.ui-button:hover:not(:disabled){animation:.25s ease-in-out forwards ui-button-gradient-slide}.ui-button--story-hover{background-position:-100% 0}.ui-button:focus-visible{box-shadow:0 0 0 3px var(--button-focus-ring);outline:none;animation:.25s ease-in-out forwards ui-button-gradient-slide}.ui-button--story-focus{box-shadow:0 0 0 3px var(--button-focus-ring);animation:.25s ease-in-out forwards ui-button-gradient-slide}.ui-button:disabled{cursor:not-allowed;background-color:var(--button-disabled-background);border-color:var(--button-disabled-border);color:var(--button-disabled-text);background-image:none}.ui-button[aria-busy=true]:disabled{cursor:wait;background-color:var(--button-background-hover);border-color:var(--button-border);color:var(--button-text)}.ui-button>:where(svg,[data-icon],.ui-spinner){stroke-width:1.75px;flex:0 0 1.5rem;width:1.5rem;height:1.5rem}.ui-button>:where([data-icon],.ui-spinner){justify-content:center;align-items:center;display:inline-flex}.ui-button>:where([data-icon],.ui-spinner) svg{stroke-width:1.75px;width:1.5rem;height:1.5rem}.ui-button:not(.ui-button--icon-only)>[data-icon=inline-start]{margin-left:-.5rem}.ui-button:not(.ui-button--icon-only)>[data-icon=inline-end]{margin-right:-.5rem}@media (max-width:48rem){.ui-button{font-size:.875rem}}@keyframes ui-button-gradient-slide{0%{background-position:0 0}to{background-position:-100% 0}}@media (prefers-reduced-motion:reduce){.ui-button:hover:not(:disabled){background-position:-100% 0;animation:none}}}