@layer components{.c-button-canary{--button-height:4.125rem;--button-padding-inline:calc(var(--spacing,.25rem)*6);--button-icon-width:calc(var(--spacing,.25rem)*6);align-items:center;justify-content:var(--button-justify-content,center);gap:calc(var(--spacing,.25rem)*2);padding-inline:var(--button-padding-inline);border-radius:var(--button-radius);width:var(--button-width,auto);height:var(--button-height,auto);cursor:pointer;background-color:var(--button-background-color);color:var(--button-text-color);border:var(--button-border,none);transition-property:background-color,border,color;transition-timing-function:var(--ease-in-out);transition-duration:var(--transition-duration-fast);display:inline-flex}.c-button-canary[aria-haspopup=dialog] *{-webkit-user-select:none;user-select:none;pointer-events:none}.c-button-canary[aria-haspopup=dialog][aria-expanded=true]{background-color:var(--button-background-color-hover);border:var(--button-border-hover,none);color:var(--button-text-color-hover)}@media (hover:hover){.c-button-canary:where(.-interactive):hover,.button-hover:hover .c-button-canary:where(.-interactive){background-color:var(--button-background-color-hover);border:var(--button-border-hover,none);color:var(--button-text-color-hover)}}.c-button-canary_label{font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:var(--button-font-weight)}.-icon-only .c-button-canary_label{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.c-button-canary_icon{--icon-width:var(--button-icon-width)}.c-button-canary{--button-font-size:var(--text-lg);--button-line-height:var(--leading-none,1);--button-font-weight:var(--font-weight-semibold,600)}.c-button-canary.-primary{--button-background-color:var(--color-red-700);--button-background-color-hover:var(--color-red-800);--button-text-color:var(--color-white);--button-text-color-hover:var(--color-white);--focus-visible-color:var(--button-background-color)}.c-button-canary.-primary:where(.primary,.primary *){--button-background-color-hover:var(--color-red-900);--button-text-color-hover:var(--color-white)}.c-button-canary.-primary:where(.sand,.sand *){--focus-visible-color:var(--color-red-700)}.c-button-canary.-secondary{--button-background-color:var(--color-black);--button-background-color-hover:var(--color-antracite-300);--button-text-color:var(--color-white);--button-text-color-hover:var(--color-white);--focus-visible-color:var(--button-background-color)}.c-button-canary.-secondary:where(.dark,.dark *){--button-background-color:var(--color-white);--button-background-color-hover:var(--color-gray-400);--button-text-color:var(--color-black);--button-text-color-hover:var(--color-black)}.c-button-canary.-secondary:where(.primary,.primary *){--button-background-color:var(--color-white);--button-background-color-hover:var(--color-gray-200);--button-text-color:var(--color-black);--button-text-color-hover:var(--color-black)}.c-button-canary.-tertiary{--button-background-color:var(--color-gray-200);--button-background-color-hover:var(--color-gray-400);--button-text-color:var(--color-black);--button-text-color-hover:var(--color-black)}.c-button-canary.-tertiary:where(.sand,.sand *){--button-background-color:var(--color-sand-200);--button-background-color-hover:var(--color-sand-300);--button-text-color:var(--color-black);--button-text-color-hover:var(--color-black)}.c-button-canary.-tertiary:where(.sand-dark,.sand-dark *){--button-background-color:var(--color-sand-100);--button-background-color-hover:var(--color-sand-300);--button-text-color:var(--color-black);--button-text-color-hover:var(--color-black)}.c-button-canary.-outline{--button-background-color:transparent;--button-background-color-hover:var(--color-black);--button-text-color:var(--color-black);--button-text-color-hover:var(--color-white);--button-border:1px solid var(--color-black);--button-border-hover:1px solid var(--color-black)}.c-button-canary.-outline:where(.dark,.dark *){--button-background-color-hover:var(--color-white);--button-text-color:var(--color-white);--button-text-color-hover:var(--color-black);--button-border:1px solid #ffffff40}@supports (color:color-mix(in lab, red, red)){.c-button-canary.-outline:where(.dark,.dark *){--button-border:1px solid color-mix(in oklab,var(--color-white)25%,transparent)}}.c-button-canary.-outline:where(.dark,.dark *){--button-border-hover:1px solid var(--color-white)}.c-button-canary.-outline:where(.primary,.primary *){--button-background-color-hover:var(--color-white);--button-text-color:var(--color-white);--button-text-color-hover:var(--color-black);--button-border:1px solid #ffffff40}@supports (color:color-mix(in lab, red, red)){.c-button-canary.-outline:where(.primary,.primary *){--button-border:1px solid color-mix(in oklab,var(--color-white)25%,transparent)}}.c-button-canary.-outline:where(.primary,.primary *){--button-border-hover:1px solid var(--color-white)}.c-button-canary.-outline:where(.sand,.sand *){--button-background-color-hover:transparent;--button-text-color:var(--color-black);--button-text-color-hover:var(--color-black);--button-border:1px solid #00000040}@supports (color:color-mix(in lab, red, red)){.c-button-canary.-outline:where(.sand,.sand *){--button-border:1px solid color-mix(in oklab,var(--color-black)25%,transparent)}}.c-button-canary.-outline:where(.sand,.sand *){--button-border-hover:1px solid var(--color-black)}.c-button-canary.-size-xs{--button-padding-inline:calc(var(--spacing,.25rem)*4);--button-height:2.5rem;--button-icon-width:calc(var(--spacing,.25rem)*4);--button-font-size:var(--text-sm)}.c-button-canary.-size-sm{--button-padding-inline:calc(var(--spacing,.25rem)*4);--button-height:2.5rem;--button-font-size:var(--text-sm)}@media not all and (min-width:1000px){.c-button-canary.-size-md,.c-button-canary.-size-lg{--button-height:3.125rem}}.c-button-canary.-width-full{--button-width:100%}.c-button-canary.-radius-sm{--button-radius:var(--radius-2xs)}.c-button-canary.-radius-md{--button-radius:var(--radius-xl)}.c-button-canary.-icon-only{--button-padding-inline:0;--button-icon-width:calc(var(--spacing,.25rem)*5);--button-width:var(--button-height)}.c-button-canary.-icon-only.-size-sm{--button-height:1.5rem}.c-button-canary.-icon-only.-size-md{--button-height:2.625rem}.c-button-canary.-icon-only.-size-lg{--button-height:4.125rem}.c-button-canary.-icon-only.-radius-full{--button-radius:100%}.c-button-canary.-disabled,.c-button-canary[disabled]{opacity:.5}}