@layer elements{.button{--_btn-bg: var(--clr-brand-700);--_btn-bg-hover: var(--clr-base-100);--_btn-text: var(--clr-base-100);--_btn-text-hover: var(--clr-brand-700);--_btn-border: var(--clr-brand-700);--_btn-border-hover: var(--clr-brand-700);display:inline-flex;align-items:center;gap:.5rem;background-color:var(--_btn-bg);color:var(--_btn-text);border:1px solid var(--_btn-border);border-radius:100vw;padding:clamp(.375rem,.1937rem + .7735vw,.9375rem) clamp(1rem,.7928rem + .884vw,1.5rem);font-size:var(--fs-400);line-height:var(--lh-300);cursor:pointer;opacity:1;transition:background-color .2s ease,color .2s ease,border-color .2s ease,filter .2s ease,opacity .2s ease;text-decoration:none}.button:hover{background-color:var(--_btn-bg-hover);color:var(--_btn-text-hover);border-color:var(--_btn-border-hover)}.button:disabled,.button[aria-disabled=true],.button.is-disabled{opacity:.5;pointer-events:none}.button .button__label{line-height:1}.button:not(:has(.button__label)){width:3rem;height:3rem;padding:0;border-radius:100vw;position:relative}.button:not(:has(.button__label)) svg.icon{position:absolute;inset:0;margin:auto}.button.button--label-desktop .button__label{display:none}.button.button--label-desktop{width:3rem;height:3rem;padding:0;border-radius:100vw;position:relative}.button.button--label-desktop svg.icon{position:absolute;inset:0;margin:auto}@media (width > 768px){.button.button--label-desktop .button__label{display:inline}.button.button--label-desktop{padding:clamp(.375rem,.1937rem + .7735vw,.9375rem) clamp(1rem,.7928rem + .884vw,1.5rem);width:auto;height:initial;border-radius:100vw}.button.button--label-desktop svg.icon{position:initial;inset:auto;margin:0}}.button.button--solid-secondary{--_btn-bg: var(--clr-accent-500);--_btn-bg-hover: var(--clr-base-100);--_btn-text: var(--clr-base-100);--_btn-text-hover: var(--clr-brand-700);--_btn-border: var(--clr-accent-500);--_btn-border-hover: var(--clr-brand-700)}.button.button--solid-color{--_btn-bg: var(--clr-brand-50);--_btn-bg-hover: var(--clr-base-100);--_btn-text: var(--clr-brand-700);--_btn-text-hover: var(--clr-brand-700);--_btn-border: var(--clr-brand-50);--_btn-border-hover: var(--clr-brand-700)}.button.button--outline-primary{--_btn-bg: var(--clr-base-100);--_btn-bg-hover: var(--clr-brand-700);--_btn-text: var(--clr-brand-700);--_btn-text-hover: var(--clr-base-100);--_btn-border: var(--clr-brand-700);--_btn-border-hover: var(--clr-brand-700)}.button.button--outline-secondary{--_btn-bg: var(--clr-base-100);--_btn-bg-hover: var(--clr-accent-500);--_btn-text: var(--clr-accent-500);--_btn-text-hover: var(--clr-base-100);--_btn-border: var(--clr-accent-500);--_btn-border-hover: var(--clr-accent-500)}.button svg.icon{min-width:1rem;height:1rem;width:1rem;display:inline-flex}}