.button{--button-padding-y: var(--spacing-xs);--button-padding-x: var(--spacing-s);--button-min-height: var(--button-height);--button-color: inherit;--button-color-hover: inherit;--button-bg: transparent;--button-bg-hover: inherit;--button-border-color: transparent;--button-border-color-hover: transparent;min-height:var(--button-min-height);line-height:inherit;font-weight:inherit;border:.0625rem solid var(--button-border-color);padding:var(--button-padding-y) var(--button-padding-x);display:inline-flex;gap:var(--spacing-s);align-items:center;text-decoration:none;justify-content:center;background-color:var(--button-bg);white-space:nowrap;color:var(--button-color);font-family:var(--font-family-interactive);font-size:inherit}.button--primary{--button-color: var(--theme-button-primary-color, var(--color-white));--button-color-hover: var(--theme-button-primary-color-hover, var(--button-color));--button-bg: var(--theme-button-primary-bg, var(--color-primary));--button-bg-hover: var(--theme-button-primary-bg-hover, var(--color-primary-darkest))}.button--secondary{--button-color: var(--theme-button-secondary-color, var(--color-primary));--button-color-hover: var(--theme-button-secondary-color-hover, var(--color-white));--button-bg: var(--theme-button-secondary-bg, var(--color-secondary));--button-bg-hover: var(--theme-button-secondary-bg-hover, var(--color-primary-darkest))}.button--tertiary{--button-color: var(--theme-button-tertiary-color, var(--color-primary-darkest));--button-color-hover: var(--theme-button-tertiary-color-hover, var(--button-color));--button-bg: var(--theme-button-tertiary-bg, var(--color-secondary-light));--button-bg-hover: var(--theme-button-tertiary-bg-hover, var(--color-secondary))}.button--subtle{--button-color: var(--theme-button-subtle-color, var(--color-primary-darkest));--button-color-hover: var(--theme-button-subtle-color-hover, var(--color-white));--button-bg: var(--theme-button-subtle-bg, var(--color-subtle));--button-bg-hover: var(--theme-button-subtle-bg-hover, var(--color-primary-darkest))}.button--light{--button-color: var(--theme-button-light-color, var(--color-primary-darkest));--button-color-hover: var(--theme-button-light-color-hover, var(--color-white));--button-bg: var(--theme-button-light-bg, var(--color-white));--button-bg-hover: var(--theme-button-light-bg-hover, var(--color-primary))}.button--dark{--button-color: var(--theme-button-dark-color, var(--color-white));--button-color-hover: var(--theme-button-dark-color-hover, var(--button-color));--button-bg: var(--theme-button-dark-bg, var(--color-primary-darkest));--button-bg-hover: var(--theme-button-dark-bg-hover, var(--color-primary))}.button--neutral{--button-color: var(--theme-button-neutral-color, var(--color-primary-darkest));--button-color-hover: var(--theme-button-neutral-color-hover, var(--button-color));--button-bg: var(--color-white);--button-bg-hover: var(--color-white);--button-border-color: var(--color-gray-medium);--button-border-color-hover: var(--color-black)}.button--outline-primary{--button-color: var(--theme-button-outline-primary-color, var(--color-primary));--button-color-hover: var(--theme-button-outline-primary-color-hover, var(--color-white));--button-bg-hover: var(--theme-button-outline-primary-bg-hover, var(--color-primary));--button-border-color: var(--theme-button-outline-primary-border-color, var(--button-bg-hover))}.button--outline-secondary{--button-color: var(--theme-button-outline-secondary-color, var(--color-secondary));--button-color-hover: var(--theme-button-outline-secondary-color-hover, var(--color-primary-darkest));--button-bg-hover: var(--theme-button-outline-secondary-bg-hover, var(--color-secondary));--button-border-color: var(--theme-button-outline-secondary-border-color, var(--button-bg-hover))}.button--outline-light{--button-color: var(--theme-button-outline-light-color, var(--color-white));--button-color-hover: var(--theme-button-outline-light-color-hover, var(--color-primary-darkest));--button-bg-hover: var(--theme-button-outline-light-bg-hover, var(--color-white));--button-border-color: var(--theme-button-outline-light-border-color, var(--button-bg-hover))}.button--outline-dark{--button-color: var(--theme-button-outline-dark-color, var(--color-primary-darkest));--button-color-hover: var(--theme-button-outline-dark-color-hover, var(--color-white));--button-bg-hover: var(--theme-button-outline-dark-bg-hover, var(--color-primary-darkest));--button-border-color: var(--theme-button-outline-dark-border-color, var(--button-bg-hover))}.button--compact{--button-padding-y: var(--spacing-xxs);--button-padding-x: var(--spacing-xs);--button-min-height: none}.button--full-width{width:100%}.button--rounded{border-radius:var(--button-height)}.button:where(:not([disabled]):not([data-disabled])):hover,.button:where(:not([disabled]):not([data-disabled])):focus-visible{color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover)}.button[disabled],.button[data-disabled]{cursor:not-allowed}