.button{--roll:calc(100% + 8px);--button-bg:var(--ink);font-family:var(--font-mono);letter-spacing:0;text-transform:uppercase;letter-spacing:0;isolation:isolate;min-height:48px;color:var(--white);white-space:nowrap;transition:color var(--dur-hover) var(--ease-hover);justify-content:center;align-items:center;padding:16px 24px;font-size:16px;font-weight:600;line-height:1;display:inline-flex;position:relative}.button:before{content:"";z-index:-1;background:var(--button-bg);clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));transition:background-color var(--dur-hover) var(--ease-hover),clip-path var(--dur-hover) var(--ease-hover);position:absolute;inset:0}.button--white{--button-bg:var(--white);color:var(--ink)}.button--ghost{--button-bg:rgba(var(--white-rgb), .15);color:var(--white)}@media (max-width:768px){.button--block{width:100%}}.button__label{line-height:1;display:grid;overflow:hidden}.button__row{transition:transform var(--dur-hover) var(--ease-hover);grid-area:1/1;justify-content:center;align-items:center;gap:4px;display:inline-flex}.button__row--clone{transform:translateY(var(--roll))}.button__arrow{flex:none}.button:hover:before,.button:focus-visible:before{clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}.button:hover .button__row,.button:focus-visible .button__row{transform:translateY(calc(-1 * var(--roll)))}.button:hover .button__row--clone,.button:focus-visible .button__row--clone{transform:translateY(0)}@media (prefers-reduced-motion:reduce){.button,.button:before,.button .button__row{transition:none}.button:hover .button__row,.button:focus-visible .button__row{transform:none}.button:hover .button__row--clone,.button:focus-visible .button__row--clone{transform:translateY(var(--roll))}}