@layer components{.c-button{--button-text-color:var(--brand-cream);--button-text-color-active:var(--brand-medium-teal);--button-background-color:var(--brand-medium-teal);--button-background-color-active:transparent;--button-border-width:2px;--button-border-color:var(--brand-medium-teal);--button-border-radius:45px;--button-font-weight:var(--font-weight-bold);background-color:var(--button-background-color);border:var(--button-border-width) solid var(--button-border-color,var(--brand-cool-grey));border-radius:var(--button-border-radius);color:var(--button-text-color);cursor:pointer;display:inline-block;font-family:var(--font-family-narrow);font-size:min(22px,var(--font-size-button));font-weight:var(--button-font-weight);line-height:1;padding:var(--button-padding,.75rem 1.6rem);text-transform:uppercase;transition:color .15s ease,background-color .15s ease,border .15s ease}.c-button:focus,.c-button:hover{background-color:var(--button-background-color-active);color:var(--button-text-color-active)}}