.ds-button{--btn-h:var(--button-h-m);--btn-gap:var(--button-gap);--btn-pad-y:var(--button-pad-y-m);--btn-pad-x:var(--button-pad-x-m);--btn-radius:var(--button-radius-m);--btn-fs:var(--button-fs-m);--btn-icon:var(--button-icon-m);--btn-short-pad:var(--button-short-pad-m);padding:var(--sp-0);border:var(--bw-0);background:var(--c-transparent);font-family:inherit;font-size:inherit;cursor:pointer;transition:transform var(--t-button) var(--ease-button);-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.ds-button:hover{text-decoration:none}.ds-button.xs{--btn-h:var(--button-h-xs);--btn-gap:var(--button-gap-xs);--btn-pad-y:var(--button-pad-y-xs);--btn-pad-x:var(--button-pad-x-xs);--btn-radius:var(--button-radius-xs);--btn-fs:var(--button-fs-xs);--btn-icon:var(--button-icon-xs);--btn-short-pad:var(--button-short-pad-xs)}.ds-button.s{--btn-h:var(--button-h-s);--btn-gap:var(--button-gap-s);--btn-pad-y:var(--button-pad-y-s);--btn-pad-x:var(--button-pad-x-s);--btn-radius:var(--button-radius-s);--btn-fs:var(--button-fs-s);--btn-icon:var(--button-icon-s);--btn-short-pad:var(--button-short-pad-s)}.ds-button.l{--btn-h:var(--button-h-l);--btn-gap:var(--button-gap-l);--btn-pad-y:var(--button-pad-y-l);--btn-pad-x:var(--button-pad-x-l);--btn-radius:var(--button-radius-l);--btn-fs:var(--button-fs-l);--btn-icon:var(--button-icon-l);--btn-short-pad:var(--button-short-pad-l)}.ds-button.xl{--btn-h:var(--button-h-xl);--btn-gap:var(--button-gap-xl);--btn-pad-y:var(--button-pad-y-xl);--btn-pad-x:var(--button-pad-x-xl);--btn-radius:var(--button-radius-xl);--btn-fs:var(--button-fs-xl);--btn-icon:var(--button-icon-xl);--btn-short-pad:var(--button-short-pad-xl)}.ds-button:active,[data-preview-state=pressed] .ds-button{transform:translateY(var(--button-press-y))}.ds-button:focus-visible,[data-preview-state=focus-visible] .ds-button{outline:var(--bw-2) solid var(--c-button-focus);outline-offset:var(--button-focus-offset)}.ds-button .inner{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--btn-gap);height:var(--btn-h);padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-radius);font-size:var(--btn-fs);font-weight:var(--fw-medium);line-height:var(--lh-solid);text-transform:uppercase;letter-spacing:var(--button-tracking);white-space:nowrap;transition:background var(--t-button) var(--ease-button), color var(--t-button) var(--ease-button), box-shadow var(--t-button) var(--ease-button);display:flex;position:relative}.ds-button .icon{width:var(--btn-icon);height:var(--btn-icon);font-size:var(--btn-icon);flex-shrink:0;display:inline-flex}.ds-button .icon :where(svg){width:var(--size-full);height:var(--size-full);display:block}.ds-button.short{border-radius:var(--button-radius-short)}.ds-button.short .inner{padding:var(--btn-short-pad)}.ds-button.default .inner{color:var(--c-button-text);background:var(--c-button-bg);box-shadow:var(--sh-button-default)}.ds-button.default:hover .inner,[data-preview-state=hover] .ds-button.default .inner{box-shadow:var(--sh-button-default-hover)}.ds-button.default:active .inner,[data-preview-state=pressed] .ds-button.default .inner{box-shadow:var(--sh-button-default-active)}.ds-button.accent .inner{color:var(--c-button-accent-text);background:var(--c-button-accent-bg);box-shadow:var(--sh-button-accent)}.ds-button.accent:hover .inner,[data-preview-state=hover] .ds-button.accent .inner{box-shadow:var(--sh-button-accent-hover)}.ds-button.accent:active .inner,[data-preview-state=pressed] .ds-button.accent .inner{box-shadow:var(--sh-button-accent-active)}.ds-button.ghost .inner{color:var(--c-button-ghost-text);background:var(--c-transparent);box-shadow:var(--sh-button-ghost)}.ds-button.ghost:hover .inner,[data-preview-state=hover] .ds-button.ghost .inner{background:var(--c-button-ghost-bg-hover)}.ds-button.ghost:active .inner,[data-preview-state=pressed] .ds-button.ghost .inner{box-shadow:var(--sh-button-default-active)}.ds-button.tone-danger.default .inner,.ds-button.tone-danger.ghost .inner{color:var(--c-button-danger)}.ds-button.tone-danger.accent .inner{color:var(--c-button-danger-text);background:var(--c-button-danger)}.ds-button:focus-visible .inner,[data-preview-state=focus-visible] .ds-button .inner{box-shadow:var(--sh-button-focus)}.ds-button .indicator{top:var(--button-indicator-offset);right:var(--button-indicator-offset);width:var(--button-indicator-size);height:var(--button-indicator-size);border-radius:var(--r-full);background:var(--c-button-indicator);box-shadow:var(--sh-button-indicator);position:absolute}@media (prefers-reduced-motion:reduce){.ds-button,.ds-button .inner{transition:none}.ds-button:active,[data-preview-state=pressed] .ds-button{transform:none}}