.btn{text-transform:uppercase;position:relative;z-index:2;padding:var(--space1-2) var(--space2);font:900 var(--fontSm)/1.125 var(--fontSans);border-radius:var(--radiusFull);letter-spacing:1px;overflow:hidden;border:2px solid transparent;box-shadow:0 0 0 2px var(--navy-20);background:var(--bg);width:max-content;max-width:100%;min-height:4em;box-sizing:border-box;transition:all .2s ease-out;&:before{font-weight:400;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;color:var(--magenta);translate:calc(var(--space1-4) * -1)}&:after{content:"";position:absolute;left:2px;top:2px;width:0;height:calc(100% - 4px);background:var(--emphasis);z-index:-1;transition:width .2s ease-in-out;border-radius:var(--radiusFull)}&:hover{color:var(--bg);box-shadow:0 0 0 2px var(--teal);&:after{width:calc(100% - 4px)}}}.btn-lg{padding:var(--space1-2) var(--space4);font-size:var(--fontBase);letter-spacing:2px;gap:var(--gapSm);min-height:4.5em;&:before{font-size:1.5em;translate:calc(var(--space1-2) * -1)}}.btn-sm{font-size:var(--fontXs);padding:var(--space1-2) var(--space);&:before{translate:none}}