.button{box-sizing:border-box;background-color:var(--paper);border:1px solid var(--paper);color:var(--ink);letter-spacing:.04em;text-align:center;text-transform:uppercase;transition:background-color .3s var(--ease), border-color .3s var(--ease);border-radius:3px;font-weight:500;text-decoration:none;display:inline-flex;position:relative}.button__label{white-space:nowrap;pointer-events:none;padding:1em 2.4em;overflow:hidden}.button__label-text{z-index:1;color:var(--ink);transition:transform .25s var(--ease), color .25s var(--ease);display:block;position:relative}.button__label-text:before{z-index:1;padding:inherit;opacity:0;color:var(--paper);content:attr(data-text);content:attr(data-text) / "";transition:opacity .25s var(--ease);position:absolute;inset:100% 0 0}@media (hover:hover){.button:hover{background-color:var(--ink);border-color:var(--paper)}.button:hover .button__label-text{color:var(--ink);transform:translateY(-100%)}.button:hover .button__label-text:before{opacity:1}}.button--black{background-color:var(--ink);border-color:var(--border)}.button--black .button__label-text{color:var(--paper)}.button--black .button__label-text:before{color:var(--ink)}@media (hover:hover){.button--black:hover{background-color:var(--paper);border-color:var(--paper)}.button--black:hover .button__label-text{color:var(--paper)}}@media (min-width:768px){.button{font-size:.75em}}@media (max-width:767px){.button__label{padding:.96em 3.85em}}@media (prefers-reduced-motion:reduce){.button,.button__label-text,.button__label-text:before{transition-duration:0s!important}}