.button{text-transform:uppercase;font-family:var(--font-apfel), Helvetica, sans-serif;border-width:4px;border-color:var(--foreground);color:var(--foreground);text-align:center;background:unset;border-style:solid;padding:12px 24px;font-size:1.2em;font-weight:500;display:inline-block;position:relative;overflow:hidden}.button span{position:relative}.button:before{content:"";background-color:var(--foreground);width:0;height:100%;transition:all .8s cubic-bezier(.075,.82,.165,1);position:absolute;top:0;left:-64px;transform:skew(45deg)}.button:hover{color:#000}.button:hover:before{opacity:1;width:calc(100% + 128px);height:100%}.button:disabled{opacity:.5;pointer-events:none}.button-white{color:var(--background);border-color:var(--background)}.button-white:before{background-color:var(--background)}.button-white:hover{color:var(--foreground)}