.button{--background: var(--blue-500);--border: var(--background);--text: var(--white);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background);border-color:var(--border);border-radius:0;border-style:solid;border-width:2px;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-primary);font-size:var(--body-sm);font-weight:var(--font-weight-700);gap:var(--size-4);inline-size:-moz-fit-content;inline-size:fit-content;max-inline-size:30rem;padding-block:var(--size-205);padding-inline:var(--size-6);text-align:left;text-decoration:none;text-wrap:wrap;transition:var(--transition-soft-linear)}.button:visited,.button:hover,.button:active{--background: var(--blue-700);--text: var(--white);color:var(--text);text-decoration:none}.button:focus-visible{outline-color:var(--blue-500)!important}.button[aria-expanded=true]:focus:after{border-color:var(--blue-500)}.button:disabled{--background: var(--grey-100);--border: var(--background);--text: var(--grey-700);cursor:not-allowed;pointer-events:none}.button svg{block-size:1em;display:inline-block;inline-size:1em}.button svg path{color:inherit}.button--primary:visited,.button--primary:hover,.button--primary:active{--background: var(--blue-700);--text: var(--white);color:var(--text)}.button--primary:focus-visible{outline-color:var(--blue-500)!important}.button--secondary{--background: var(--gold-300);--text: var(--blue-700)}.button--secondary:visited,.button--secondary:hover,.button--secondary:active{--background: var(--gold-500);--text: var(--blue-700)}.button--secondary:focus-visible{outline-color:var(--gold-500)!important}.button--outlined{--background: transparent;--border: var(--blue-500);--text: var(--border)}.button--outlined:visited,.button--outlined:hover,.button--outlined:active{--background: var(--blue-100);--text: var(--blue-500)}:where([class*=bg-blue-]:not(.bg-blue-100)) .button--primary,.button--outlined--reversed{--background: transparent;--border: var(--white);--text: var(--border)}:where([class*=bg-blue-]:not(.bg-blue-100)) .button--primary:visited,.button--outlined--reversed:visited{--background: transparent;--border: var(--white);--text: var(--border)}:where([class*=bg-blue-]:not(.bg-blue-100)) .button--primary:hover,:where([class*=bg-blue-]:not(.bg-blue-100)) .button--primary:active,.button--outlined--reversed:hover,.button--outlined--reversed:active{--background: var(--white);--border: var(--background);--text: var(--blue-500)}:where([class*=bg-blue-]:not(.bg-blue-100)) .button--primary:focus-visible,.button--outlined--reversed:focus-visible{outline-color:var(--white)!important}.button--ghost,.button--ghost:visited{--background: transparent;--border: var(--background);--text: var(--blue-500)}.button--ghost:hover,.button--ghost:active{--background: var(--blue-100);--border: var(--background);--text: var(--blue-500)}.button--ghost--reversed,.button--ghost--reversed:visited{--background: transparent;--border: var(--background);--text: var(--white)}.button--ghost--reversed:hover,.button--ghost--reversed:active{--background: var(--blue-100);--border: var(--background);--text: var(--blue-500)}.button--square{padding:var(--size-205)}