.button{isolation:isolate;cursor:pointer;border:1px solid;justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1.5rem;text-decoration:none;transition:color .3s,border-color .3s;display:inline-flex;position:relative;overflow:hidden}.button:before{content:"";z-index:-1;width:0;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0}.button:hover:before{width:100%}.button__label{z-index:1;white-space:nowrap;position:relative}.button__icon{z-index:1;flex-shrink:0;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;transition:transform .3s;display:flex;position:relative}.button:hover .button__icon{transform:translate(.25rem)}.button--ink{color:var(--paper);border-color:var(--paper)}.button--ink:before{background-color:var(--red)}.button--ink:hover{color:var(--ink);border-color:var(--red)}.button--red{color:var(--ink);border-color:var(--ink)}.button--red:before{background-color:var(--ink)}.button--red:hover{color:var(--paper)}.button--no-icon{gap:0}.button--no-icon .button__label{text-align:center;width:100%}@media (max-width:768px){.button{gap:.75rem;padding:.75rem 1.25rem}.button__icon{width:1rem;height:1rem}}@media (hover:none){.button:before{transition:none}.button:active:before{width:100%}.button__icon{transition:none}.button:active .button__icon{transform:translate(.25rem)}}