.button{--_btn-min-height:var(--btn-min-height,2.5714285714rem);--_btn-icon-size:var(--btn-icon-size,1.715em);--_btn-left-icon-size:var(--btn-left-icon-size,var(--_btn-icon-size));--_btn-right-icon-size:var(--btn-right-icon-size,var(--_btn-icon-size));--_btn-icon-color:var(--btn-icon-color,currentColor);--_btn-left-icon-color:var(--btn-left-icon-color,var(--_btn-icon-color));--_btn-right-icon-color:var(--btn-right-icon-color,var(--_btn-icon-color));--_btn-confirm-color:var(--btn-confirm-color,var(--clr-dark-accent));display:inline-flex;gap:var(--spacing-sm);align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;font:inherit;border:none;color:inherit;background-color:unset;border:var(--border-width) solid transparent;border-radius:var(--border-radius);min-height:var(--_btn-min-height);padding:var(--spacing-sm) var(--spacing);cursor:pointer;transition-duration:var(--transition-duration);transition-property:opacity,background-color,color,border-color,box-shadow}.button:disabled,.button[aria-disabled=true]{cursor:not-allowed;opacity:.5;box-shadow:none}.button__icon{flex-shrink:0}.button__icon--left{font-size:var(--_btn-left-icon-size);color:var(--_btn-left-icon-color)}.button__icon--right{font-size:var(--_btn-right-icon-size);color:var(--_btn-right-icon-color)}.button[aria-busy=true] .button__icon{animation:spin .5s linear infinite}.button:has(>.button__badge){position:relative}.button__badge{position:absolute;left:calc(100% - var(--spacing)*1.5);bottom:calc(100% - var(--spacing))}.button--confirming{animation:calc(var(--transition-duration)*2) shake}.button--variant-link{display:inline;text-decoration:underline;padding:0;min-height:auto;border:none}.button--variant-link .button__icon--left{margin-inline-end:var(--spacing-sm)}.button--variant-link .button__icon--right{margin-inline-start:var(--spacing-sm)}.button--confirming.button--variant-link{color:var(--_btn-confirm-color)}.button--variant-primary{color:var(--clr-bg);background-color:var(--clr-primary)}.button--variant-primary:not(:disabled):hover{background-color:var(--clr-dark-primary);box-shadow:var(--shadow)}.button--confirming.button--variant-primary,.button--confirming.button--variant-primary:not(:disabled):hover{background-color:var(--_btn-confirm-color)}.button--variant-primary-border{color:var(--clr-primary);background-color:transparent;border-color:var(--clr-primary)}.button--variant-primary-border:not(:disabled):hover{box-shadow:var(--shadow)}.button--confirming.button--variant-primary-border{color:var(--_btn-confirm-color);border-color:var(--_btn-confirm-color)}.button--variant-secondary{color:var(--clr-txt);background-color:var(--clr-line)}.button--variant-secondary:not(:disabled):hover{box-shadow:var(--shadow)}.button--confirming.button--variant-secondary{color:var(--clr-bg);background-color:var(--_btn-confirm-color)}.button--variant-secondary-border{color:var(--clr-txt);background-color:transparent;border-color:var(--clr-line)}.button--variant-secondary-border:not(:disabled):hover{box-shadow:var(--shadow)}.button--confirming.button--variant-secondary-border{color:var(--_btn-confirm-color);border-color:var(--_btn-confirm-color)}.button--variant-accent{color:var(--clr-bg);background-color:var(--clr-accent)}.button--variant-accent:not(:disabled):hover{background-color:var(--clr-dark-accent);box-shadow:var(--shadow)}.button--confirming.button--variant-accent{background-color:var(--_btn-confirm-color)}.button--variant-accent-border{color:var(--clr-accent);background-color:transparent;border-color:var(--clr-accent)}.button--variant-accent-border:not(:disabled):hover{color:var(--clr-dark-accent);border-color:var(--clr-dark-accent);box-shadow:var(--shadow)}.button--confirming.button--variant-accent-border{color:var(--_btn-confirm-color);border-color:var(--_btn-confirm-color)}.button--variant-neutral{color:var(--clr-txt);background-color:var(--clr-bg)}.button--variant-neutral:not(:disabled):hover{background-color:var(--clr-light-gray);box-shadow:var(--shadow)}.button--confirming.button--variant-neutral{color:var(--clr-bg);background-color:var(--_btn-confirm-color)}.button--variant-light{color:var(--clr-txt);background-color:var(--clr-light-blue)}.button--variant-light:not(:disabled):hover{background-color:var(--clr-light-gray);box-shadow:var(--shadow)}.button--confirming.button--variant-light{color:var(--clr-bg);background-color:var(--_btn-confirm-color)}.button--variant-inverted{color:var(--clr-bg);background-color:var(--clr-fg)}.button--variant-inverted:not(:disabled):hover{background-color:var(--clr-primary);box-shadow:var(--shadow)}.button--confirming.button--variant-inverted{color:var(--clr-bg);background-color:var(--_btn-confirm-color)}.button--variant-ghost{background-color:transparent}.button--variant-ghost:not(:disabled):hover{background-color:rgb(var(--rgb-white)/30%);box-shadow:var(--shadow)}.button--confirming.button--variant-ghost{color:var(--clr-bg);background-color:var(--_btn-confirm-color)}.button--size-small:not(.button--variant-link){--_btn-min-height:1.7142857143rem;padding-block:calc(var(--spacing-sm)/2)}.button--size-large:not(.button--variant-link){--_btn-min-height:3.4285714286rem}.button--shape-pill{border-radius:9999px}.button--shape-circle{aspect-ratio:1;border-radius:50%;padding:var(--spacing-sm);min-width:var(--_btn-min-height)}.button--orientation-vertical{flex-direction:column}
