.button{--button-padding-x:var(--sp-8);--button-padding-y:var(--sp-3);--button-border-radius:0;--button-font-size:var(--font-size-body);gap:var(--sp-3);padding:var(--button-padding-y) var(--button-padding-x);border:var(--sp-unit) solid var(--button-border-color);border-radius:var(--button-border-radius);font-size:var(--button-font-size);color:var(--button-color);background-color:var(--button-background-color);transition:var(--animation-colors-fade);justify-content:center;align-items:center;display:inline-flex}.button:hover{border-color:var(--button-border-color-hover);color:var(--button-color-hover);background-color:var(--button-background-color-hover)}.button.link{color:var(--button-color);text-decoration:none}.button.link:hover{color:var(--button-color-hover)}.button .icon{height:var(--sp-6);margin:calc(var(--sp-1) * -1) 0}.button[disabled]{pointer-events:none;opacity:.7}.button:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset)}.button.button--narrow{--button-padding-x:var(--button-padding-y)}.button--grey{--button-background-color:var(--color-grey-600);--button-background-color-hover:var(--color-grey-900);--button-border-color:var(--color-grey-600);--button-border-color-hover:var(--color-grey-900);--button-color:var(--color-text-secondary);--button-color-hover:var(--color-text-secondary)}.button--grey-outline{--button-background-color:var(--color-grey-50);--button-background-color-hover:var(--color-grey-400);--button-border-color:var(--color-grey-200);--button-border-color-hover:var(--color-grey-400);--button-color:var(--color-text-primary);--button-color-hover:var(--color-text-primary)}.button--ghost{--button-background-color:rgb(from var(--color-surface-primary) r g b / 8%);--button-background-color-hover:rgb(from var(--color-surface-primary) r g b / 18%);--button-border-color:rgb(from var(--color-surface-primary) r g b / 24%);--button-border-color-hover:rgb(from var(--color-surface-primary) r g b / 34%);--button-color:var(--color-text-secondary);--button-color-hover:var(--color-text-secondary)}.button--link{--button-background-color:transparent;--button-background-color-hover:transparent;--button-border-color:transparent;--button-border-color-hover:transparent;--button-color:var(--color-text-primary);--button-color-hover:var(--color-grey-600);--button-padding-x:0;--button-padding-y:0;text-decoration:underline}.button--none{--button-background-color:transparent;--button-background-color-hover:var(--color-grey-300);--button-border-color:transparent;--button-border-color-hover:var(--color-grey-300);--button-color:var(--color-text-primary);--button-color-hover:var(--color-text-primary)}.button--outline{--button-background-color:var(--color-surface-primary);--button-background-color-hover:var(--color-grey-400);--button-border-color:var(--color-text-primary);--button-border-color-hover:var(--color-grey-400);--button-color:var(--color-text-primary);--button-color-hover:var(--color-text-primary)}.button--primary{--button-background-color:var(--color-brand-primary);--button-background-color-hover:var(--color-brand-strong);--button-border-color:var(--color-brand-primary);--button-border-color-hover:var(--color-brand-strong);--button-color:var(--color-text-secondary);--button-color-hover:var(--color-text-secondary)}.button--secondary{--button-background-color:var(--color-surface-primary);--button-background-color-hover:var(--color-grey-50);--button-border-color:var(--color-surface-primary);--button-border-color-hover:var(--color-grey-50);--button-color:var(--color-brand-strong);--button-color-hover:var(--color-brand-strong)}.button--highlight{--button-background-color:var(--color-brand-highlight);--button-background-color-hover:var(--color-brand-strong);--button-border-color:var(--color-brand-highlight);--button-border-color-hover:var(--color-brand-strong);--button-color:var(--color-text-secondary);--button-color-hover:var(--color-text-secondary)}