.button{--button-height: var(--override-button-height, var(--spacing-48));--button-background-color: var(--override-button-background-color, transparent);--button-color: var(--override-button-color, currentColor);--button-padding-top: var(--override-button-padding-top);--button-padding-right: var(--override-button-padding-right, var(--spacing-default));--button-padding-bottom: var(--override-button-padding-bottom);--button-padding-left: var(--override-button-padding-left, var(--spacing-default));--button-border-size: var(--override-button-border-size, 1px);--button-border-style: var(--override-button-border-style, solid);--button-border-color: var(--override-button-border-color, var(--color-text-default));cursor:pointer;align-content:center;min-height:var(--button-height);padding-top:var(--button-padding-top);padding-right:var(--button-padding-right);padding-bottom:var(--button-padding-bottom);padding-left:var(--button-padding-left);border:1px solid var(--button-border-color);border:var(--button-border-size) var(--button-border-style) var(--button-border-color);border-radius:var(--button-height);color:currentColor;color:var(--button-color);background:transparent;background:var(--button-background-color)}.button[props-icon-only]{justify-content:center;aspect-ratio:1;padding-right:0;padding-left:0}.button[props-icon-location=before] .content{flex-direction:row-reverse}.button[props-has-border=false]{border-color:transparent}.button .content{display:flex;gap:var(--spacing-6);align-items:center;justify-content:center}:is(.button .content) .icon{transform:translateY(2%);fill:currentColor}:is(.button .content) ._text{text-align:left}:is(.button[props-loading],.button[data-form-state=processing]):not(:has(.icon-wrapper)){cursor:wait}:is(.button[props-loading],.button[data-form-state=processing]) .icon-wrapper{animation:button-rotate 1.5s infinite}.button[props-icon-only] .icon{transform:none;transform:initial}.button[props-button-style=transparent]{--button-background-color: var(--override-button-background-color, transparent);--button-color: var(--override-button-color, currentColor);--button-border-color: var(--override-button-border-color, currentColor)}.button[props-button-style=primaryRed]{--button-background-color: var(--override-button-background-color, var(--color-brand-red));--button-color: var(--override-button-color, var(--color-text-inverted));--button-border-color: var(--override-button-border-color, var(--color-brand-red))}.button[props-button-style=primaryWhite]{--button-background-color: var(--override-button-background-color, var(--color-surface-background));--button-color: var(--override-button-color, var(--color-text-default));--button-border-color: var(--override-button-border-color, currentColor)}.button[props-button-style=primaryBlack]{--button-background-color: var(--override-button-background-color, var(--color-text-default));--button-color: var(--override-button-color, var(--color-text-inverted));--button-border-color: var(--override-button-border-color, var(--color-text-default))}.button[props-button-style=text]{all:unset;cursor:pointer;font-weight:400;text-decoration:underline}.button[props-button-style=text]:hover{color:var(--override-button-color, var(--color-brand-red))}html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover{color:var(--override-button-color, var(--color-brand-red));background-color:transparent;background-color:var(--override-button-background-color, transparent)}[props-has-border=true]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover):not([props-icon-only]){border-color:var(--override-button-border-color, var(--color-brand-red))}[props-button-style=transparent]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-color: var(--color-brand-red)}[props-button-style=transparent][props-has-border=true]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-border-color: var(--override-button-color)}[props-button-style=primaryRed]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-background-color: var(--color-text-default);--override-button-color: var(--color-text-inverted)}[props-button-style=primaryRed][props-has-border=true]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-border-color: var(--color-text-default)}[props-button-style=primaryWhite]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-background-color: var(--color-text-default);--override-button-color: var(--color-text-inverted)}[props-button-style=primaryWhite][props-has-border=true]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-border-color: var(--color-text-default)}[props-button-style=primaryBlack]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-background-color: var(--color-surface-background);--override-button-color: var(--color-text-default)}[props-button-style=primaryBlack][props-has-border=true]:is(html[data-whatintent=touch] .button:active,html:not([data-whatintent=touch]) .button:hover){--override-button-border-color: currentColor}.button[disabled]:not([props-loading]):not([data-form-state=processing]),html[data-whatintent=touch] .button[disabled]:not([props-loading]):not([data-form-state=processing]):active,html:not([data-whatintent=touch]) .button[disabled]:not([props-loading]):not([data-form-state=processing]):hover{--override-button-background-color: var(--color-surface-panel);--override-button-color: var(--color-text-default);--override-button-border-color: transparent;cursor:not-allowed}@keyframes button-rotate{0%{transform:rotate(0) scaleX(-1)}to{transform:rotate(360deg) scaleX(-1)}}