.button{--btn-bg:var(--ink);--btn-fg:var(--stock);--btn-hover:var(--blue);background:var(--btn-bg);min-height:3.25rem;color:var(--btn-fg);border:2px solid var(--btn-bg);isolation:isolate;transition:color .35s var(--ease-quart-out),border-color .35s var(--ease-quart-out);-webkit-tap-highlight-color:transparent;border-radius:999px;align-items:center;gap:.85em;padding:.95rem 1.4rem .9rem;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.button:before{content:"";z-index:-1;background:var(--btn-hover);transition:transform .45s var(--ease-expo-out);position:absolute;inset:0;transform:translateY(101%)}.button__arrow{transition:transform .45s var(--ease-expo-out);flex:none}@media (hover:hover){.button:hover:before{transform:translateY(0)}.button:hover{border-color:var(--btn-hover)}.button:hover .button__arrow{transform:translate(.25em)}}.button:active{transform:translateY(1px)scale(.985)}.button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.button--yellow{--btn-bg:var(--yellow);--btn-fg:var(--ink);--btn-hover:var(--pink)}.button--stock{--btn-bg:var(--stock);--btn-fg:var(--ink);--btn-hover:var(--yellow)}.button--outline{--btn-bg:transparent;--btn-fg:currentColor;--btn-hover:var(--ink);border-color:currentColor}@media (hover:hover){.button--outline:hover{color:var(--stock)}}