.button-container{background-color:hsl(var(--color-primary));border-radius:calc(var(--grid-unit) * 5);border:none;padding:0;cursor:pointer;outline-offset:4px}.background-normal{--background-color: var(--color-background)}.background-accent{--background-color: var(--color-background-accent)}.button-front{display:block;padding:12px 42px;border-radius:calc(var(--grid-unit) * 5);font-size:var(--font-size-md);font-family:var(--font-display);font-weight:600;text-transform:uppercase;background-color:hsl(var(--background-color));color:hsl(var(--color-primary));border:2px solid hsl(var(--color-primary));transform:translateY(-3px) translate(-3px)}.button-front-small{display:block;padding:6px 12px;border-radius:calc(var(--grid-unit) * 5);font-size:var(--font-size-xs);font-family:var(--font-display);font-weight:600;text-transform:uppercase;background-color:hsl(var(--background-color));color:hsl(var(--color-primary));border:2px solid hsl(var(--color-primary))}.button-container:active .button-front{transform:translate(0) translateY(0)}